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. 61
      superx/xml/js/viz/viz_functions.js

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

@ -51,3 +51,4 @@ @@ -51,3 +51,4 @@
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^
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,3 +4,4 @@
4^2^20^color^
5^2^21^y^
6^2^22^color^
7^1^19^values^

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

@ -25,3 +25,4 @@ @@ -25,3 +25,4 @@
27^2^79^text^
28^2^93^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 @@ @@ -223,7 +223,6 @@
241^7^5^0^202^
242^7^6^0^204^
243^7^7^0^203^
244^7^8^0^305^
245^7^11^0^604^
246^7^12^0^605^
247^7^13^0^603^
@ -299,7 +298,6 @@ @@ -299,7 +298,6 @@
317^9^5^0^202^
318^9^6^0^204^
319^9^7^0^203^
320^9^8^0^305^
321^9^11^0^604^
322^9^12^0^605^
323^9^13^0^603^
@ -382,3 +380,7 @@ @@ -382,3 +380,7 @@
400^3^24^0^410^
401^6^78^0^400^
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^

61
superx/xml/js/viz/viz_functions.js

@ -1223,9 +1223,10 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render @@ -1223,9 +1223,10 @@ function renderGeneralChartPropertiesForm(formDiv,myCommonChartProperties,render
{
var newcommonChartPropertyGroup = new commonChartPropertyGroup(myCommonChartProperties[k].groupCaption,groupUniquename,"");
commonChartPropertyGroups.push(newcommonChartPropertyGroup);
}
previousGroup=groupUniquename;
}
}
const columnDiv = document.createElement("div");
for(var i=0;i < commonChartPropertyGroups.length;i++)
{
@ -2529,11 +2530,12 @@ if(numberOfChildNodes>0) @@ -2529,11 +2530,12 @@ if(numberOfChildNodes>0)
{
switch (renderer) {
case "plot":
var myFigure=myChartDiv.childNodes[0];
if(myFigure.childNodes.length>0)
for (var i=0;i<numberOfChildNodes;i++)
{
var mySvg=myFigure.childNodes[0];
svg_xml = (new XMLSerializer).serializeToString(mySvg);
var myNode=myChartDiv.childNodes[i];
var mySvg=myNode;
// Extract the data as SVG text string
svg_xml += (new XMLSerializer).serializeToString(mySvg);
}
break;
case "d3js":
@ -2542,7 +2544,7 @@ if(numberOfChildNodes>0) @@ -2542,7 +2544,7 @@ if(numberOfChildNodes>0)
var myNode=myChartDiv.childNodes[i];
if(myNode.nodeName=="svg")
{
var mySvg=myNode; //document.getElementById("chartSVG");
var mySvg=myNode;
// Extract the data as SVG text string
svg_xml = (new XMLSerializer).serializeToString(mySvg);
}
@ -2576,6 +2578,7 @@ else @@ -2576,6 +2578,7 @@ else
}
function showChartModelCode()
{
var mySrcDiv=document.getElementById("chartModelsrc");
@ -2781,7 +2784,9 @@ for (let i = 1; i < 4; i++) { @@ -2781,7 +2784,9 @@ for (let i = 1; i < 4; i++) {
function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
{
// 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 sLinks=getSankeyLinks(sNodes,data); //graph.links;
renderSankey(myCommonChartProperties,mySvg,sNodes,sLinks);
@ -2902,7 +2907,15 @@ var margin = { top: 10, right: 10, bottom: 10, left: 10 }, @@ -2902,7 +2907,15 @@ var margin = { top: 10, right: 10, bottom: 10, left: 10 },
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function (d) { return formatNumber(d); },
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
/*const sankeyDiv = svg.selectAll("g")
.attr("transform",
@ -2955,7 +2968,7 @@ var graph=sankey(data); @@ -2955,7 +2968,7 @@ var graph=sankey(data);
var col = "rgb(" + r + "," + g + "," + b + ")";
return d.color = col;
})
/*.style("fill", d3.schemaPastel2)*/
@ -2985,7 +2998,21 @@ var graph=sankey(data); @@ -2985,7 +2998,21 @@ var graph=sankey(data);
// add in the title for the nodes
node.append("text")
.style("fill", "#3f3f3f")
.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("font-size",fontSize)
.attr("font-family",fontFamily)
.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 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")
@ -2995,5 +3022,19 @@ var graph=sankey(data); @@ -2995,5 +3022,19 @@ var graph=sankey(data);
.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