Browse Source

Formatierung Schrift Sankey Charts #6

viz_worldmap
Daniel Quathamer 2 years ago
parent
commit
45e73ec4fa
  1. 1
      src-modules/module/viz/schluesseltabellen/viz_property.unl
  2. 1
      src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl
  3. 1
      src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl
  4. 6
      src-modules/module/viz/schluesseltabellen/viz_type_property.unl
  5. 65
      superx/xml/js/viz/viz_functions.js

1
src-modules/module/viz/schluesseltabellen/viz_property.unl

@ -51,3 +51,4 @@
94^Y: Linie^line_y^true^ ^0^true|false^0^2^21^Linie Y-Achse^602^^^boolean^ 94^Y: Linie^line_y^true^ ^0^true|false^0^2^21^Linie Y-Achse^602^^^boolean^
95^Dimension 1^dimension1^^ ^0^ ^0^1^5^ ^608^^^string^ 95^Dimension 1^dimension1^^ ^0^ ^0^1^5^ ^608^^^string^
96^Dimension 2^dimension2^^ ^0^ ^0^1^5^ ^608^^^string^ 96^Dimension 2^dimension2^^ ^0^ ^0^1^5^ ^608^^^string^
97^Leerzeilen-Maskierung^null_value_mask^ ^ ^0^ ^0^1^10^Text, der ersetzt wird, wenn eine Dimension leer ist, z.B. *Andere Hochschule* bei BA-MA-Übergang^700^^^string^

1
src-modules/module/viz/schluesseltabellen/viz_property_group_renderer.unl

@ -4,3 +4,4 @@
4^2^20^color^ 4^2^20^color^
5^2^21^y^ 5^2^21^y^
6^2^22^color^ 6^2^22^color^
7^1^19^values^

1
src-modules/module/viz/schluesseltabellen/viz_property_renderer.unl

@ -25,3 +25,4 @@
27^2^79^text^ 27^2^79^text^
28^2^93^line^ 28^2^93^line^
29^2^94^line^ 29^2^94^line^
30^1^97^null_value_mask^

6
src-modules/module/viz/schluesseltabellen/viz_type_property.unl

@ -223,7 +223,6 @@
241^7^5^0^202^ 241^7^5^0^202^
242^7^6^0^204^ 242^7^6^0^204^
243^7^7^0^203^ 243^7^7^0^203^
244^7^8^0^305^
245^7^11^0^604^ 245^7^11^0^604^
246^7^12^0^605^ 246^7^12^0^605^
247^7^13^0^603^ 247^7^13^0^603^
@ -299,7 +298,6 @@
317^9^5^0^202^ 317^9^5^0^202^
318^9^6^0^204^ 318^9^6^0^204^
319^9^7^0^203^ 319^9^7^0^203^
320^9^8^0^305^
321^9^11^0^604^ 321^9^11^0^604^
322^9^12^0^605^ 322^9^12^0^605^
323^9^13^0^603^ 323^9^13^0^603^
@ -382,3 +380,7 @@
400^3^24^0^410^ 400^3^24^0^410^
401^6^78^0^400^ 401^6^78^0^400^
402^6^24^0^410^ 402^6^24^0^410^
403^12^97^0^100^
404^12^6^10^0^
405^12^7^0^0^
406^12^5^20^0^

65
superx/xml/js/viz/viz_functions.js

@ -1223,8 +1223,9 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
{ {
var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,""); var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,"");
commonChartPropertyGroups.push(newcommonChartPropertyGroup); commonChartPropertyGroups.push(newcommonChartPropertyGroup);
previousGroup=groupUniquename;
} }
previousGroup=groupUniquename;
} }
const columnDiv = document.createElement("div"); const columnDiv = document.createElement("div");
for(var i=0;i < commonChartPropertyGroups.length;i++) for(var i=0;i < commonChartPropertyGroups.length;i++)
@ -2529,12 +2530,13 @@ if(numberOfChildNodes>0)
{ {
switch (renderer) { switch (renderer) {
case "plot": case "plot":
var myFigure=myChartDiv.childNodes[0]; for (var i=0;i<numberOfChildNodes;i++)
if(myFigure.childNodes.length>0)
{ {
var mySvg=myFigure.childNodes[0]; var myNode=myChartDiv.childNodes[i];
svg_xml = (new XMLSerializer).serializeToString(mySvg); var mySvg=myNode;
} // Extract the data as SVG text string
svg_xml += (new XMLSerializer).serializeToString(mySvg);
}
break; break;
case "d3js": case "d3js":
for (var i=0;i<numberOfChildNodes;i++) for (var i=0;i<numberOfChildNodes;i++)
@ -2542,7 +2544,7 @@ if(numberOfChildNodes>0)
var myNode=myChartDiv.childNodes[i]; var myNode=myChartDiv.childNodes[i];
if(myNode.nodeName=="svg") if(myNode.nodeName=="svg")
{ {
var mySvg=myNode; //document.getElementById("chartSVG"); var mySvg=myNode;
// Extract the data as SVG text string // Extract the data as SVG text string
svg_xml = (new XMLSerializer).serializeToString(mySvg); svg_xml = (new XMLSerializer).serializeToString(mySvg);
} }
@ -2576,6 +2578,7 @@ else
} }
function showChartModelCode() function showChartModelCode()
{ {
var mySrcDiv=document.getElementById("chartModelsrc"); var mySrcDiv=document.getElementById("chartModelsrc");
@ -2781,7 +2784,9 @@ for (let i = 1; i < 4; i++) {
function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem) function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
{ {
// load the data // load the data
var captionEmptyTarget="Leer"; var captionEmptyTarget=getCommonChartPropertyFromModel(myCommonChartProperties,"null_value_mask");
if(captionEmptyTarget=="")
captionEmptyTarget="Leer";
var sNodes=getSankeyNodes(data,captionEmptyTarget); //graph.nodes; var sNodes=getSankeyNodes(data,captionEmptyTarget); //graph.nodes;
var sLinks=getSankeyLinks(sNodes,data); //graph.links; var sLinks=getSankeyLinks(sNodes,data); //graph.links;
renderSankey(myCommonChartProperties,mySvg,sNodes,sLinks); renderSankey(myCommonChartProperties,mySvg,sNodes,sLinks);
@ -2902,7 +2907,15 @@ var margin = { top: 10, right: 10, bottom: 10, left: 10 },
var formatNumber = d3.format(",.0f"), // zero decimal places var formatNumber = d3.format(",.0f"), // zero decimal places
format = function (d) { return formatNumber(d); }, format = function (d) { return formatNumber(d); },
color = d3.scaleOrdinal().range(["#002060ff", "#164490ff", "#4d75bcff", "#98b3e6ff", "#d5e2feff", "#008cb0ff"]); color = d3.scaleOrdinal().range(["#002060ff", "#164490ff", "#4d75bcff", "#98b3e6ff", "#d5e2feff", "#008cb0ff"]);
var textColor=getCommonChartPropertyFromModel(myCommonChartProperties,"color");
if(textColor=="")
textColor="#3f3f3f";
var fontSize=getCommonChartPropertyFromModel(myCommonChartProperties,"fontSize");
if(fontSize=="")
fontSize="12pt";
var fontFamily=getCommonChartPropertyFromModel(myCommonChartProperties,"fontFamily");
if(fontFamily=="")
fontFamily="sans-serif";
// append the svg object to the body of the page // append the svg object to the body of the page
/*const sankeyDiv = svg.selectAll("g") /*const sankeyDiv = svg.selectAll("g")
.attr("transform", .attr("transform",
@ -2955,7 +2968,7 @@ var graph=sankey(data);
var col = "rgb(" + r + "," + g + "," + b + ")"; var col = "rgb(" + r + "," + g + "," + b + ")";
return d.color = col; return d.color = col;
}) })
/*.style("fill", d3.schemaPastel2)*/
@ -2985,15 +2998,43 @@ var graph=sankey(data);
// add in the title for the nodes // add in the title for the nodes
node.append("text") node.append("text")
.style("fill", "#3f3f3f") .style("fill", textColor)
.attr("x", function (d) { return d.x0 - 6; }) .attr("x", function (d) { return d.x0 - 6; })
.attr("y", function (d) { return (d.y1 + d.y0) / 2; }) .attr("y", function (d) { return (d.y1 + d.y0) / 2; })
.attr("dy", "0.35em") .attr("dy", "0.35em")
.attr("font-size",fontSize)
.attr("font-family",fontFamily)
.attr("text-anchor", "end") .attr("text-anchor", "end")
.text(function (d) { return d.name; }) .text(function (d) { return d.name; })
.filter(function (d) { return d.x0 < width / 2; }) .filter(function (d) { return d.x0 < width / 2; })
.attr("x", function (d) { return d.x1 + 6; }) .attr("x", function (d) { return d.x1 + 6; })
.attr("text-anchor", "start") .attr("text-anchor", "start")
; ;
// add in the title for the nodes
/*node.append("text")
.style("fill", textColor)
.attr("x", function (d) { return d.x0 - 6; })
.attr("y", function (d) { return (d.y1 + d.y0) / 2; })
.attr("dy", "0.35em")
.attr("text-anchor", "end")
.text(function (d) { return d.name; })
.filter(function (d) { return d.x0 < width / 2; })
.attr("x", function (d) { return d.x1 + 6; })
.attr("text-anchor", "start")
;*/
// add in the value labels for the nodes
node.append("text")
.style("fill", textColor)
.attr("x", function (d) { return d.x0+20; }) //rechte Seite
.attr("y", function (d) { return (d.y1 + d.y0) / 2; })
.attr("dy", "0.35em")
.attr("font-size",fontSize)
.attr("font-family",fontFamily)
.attr("text-anchor", "start")
.text(function (d) { return d.value; })
.filter(function (d) { return d.x0 < width / 2; })
.attr("x", function (d) { return d.x1 -40; }) //linke Seite
.attr("text-anchor", "start")
;
} }
Loading…
Cancel
Save