Q&A
前提・実現したいこと
実はjavascript, htmlに関する経験がゼロに等しいのですが、どうしても急ぎで可視化して理解したいことがありまして、見よう見まねで下のコードを書いて試してみました。そこそこ動いてくれたのですが、行き詰まっているのは次の点です。
次の1,2は同じことかもしれませんが、理解してそう思うわけではありませんので分けてお尋ねします。 １ データ数に合わせて画面表示を自動調節し、表示が見きれないようにしたい。 ２ A4またはA3サイズ一枚に印刷したい。 また、以下はおまけですが ３ Windows, Macintoshいずれのマシンにも最新版のChromeをインストールしているにもかかわらず、作成したhtmlファイルがWindows 7/Chromeで表示され、Macintosh/Chrome 67.0.3396.99で表示されない理由がわからない。なお、OS 10.11.6 /Safari 9.1.2 で作業できています。
該当のソースコード
html + javascript <!DOCTYPE html> <meta charset="utf-8"> <style> .node { stroke: #fff; stroke-width: 4.5px; } .link { stroke: #808080; stroke-opacity: .6; } </style> <body> <script src="js/d3.js"></script> <script> var width = 840; var height = 1188; var textcoler = "#000", color = d3.scale.category10(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var force = d3.layout.force() .charge(-2200) .linkDistance(function(d) { return d.linkdistance; }) .size([width, height]); d3.json("mapping.json", function(error, json) { if (error) throw error; force .nodes(json.nodes) .links(json.links) .start(); var link = svg.selectAll(".link") .data(json.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return d.width; }); var node = svg.selectAll(".node") .data(json.nodes) .enter().append("g") .attr("class", "node") .call(force.drag); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; }); var arc = d3.svg.arc() .outerRadius(function(d){ return d.value;}) .innerRadius(0); node.selectAll("path") .data(function(d, i) {return pie(d.proportions); }) .enter() .append("svg:path") .attr("d", arc) .attr("fill", function(d, i) { return color(d.data.group); }); node.append("text") .attr("text-anchor", "middle") .attr("dx", 0) .attr("dy", 0) .style('fill', textcoler) .style('stroke', "none") .style("font-weight", "bold") .attr("font-size", function(d) { return d.textsize; }) .text(function(d) { return d.name }); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"}); }); }); </script>
試したこと
（申し訳ありませんが知識と理解の不足で、どこを試せばいいのか見当がついておりません。）
補足情報（FW/ツールのバージョンなど）
以下は、用いたサンプルデータの一つです。
{
"nodes":[
{"name":"A","textsize": 48, "proportions": [
{"group": 2, "value": 34},
{"group": 3, "value": 39},
{"group": 1, "value": 56},
{"group": 5, "value": 31},
{"group": 4, "value": 52}]
},
{"name":"B","textsize": 48, "proportions": [
{"group": 2, "value": 3},
{"group": 3, "value": 25},
{"group": 1, "value": 34},
{"group": 5, "value": 13},
{"group": 4, "value": 16}]
},
{"name":"C","textsize": 48, "proportions": [
{"group": 2, "value": 19},
{"group": 3, "value": 13},
{"group": 1, "value": 21},
{"group": 5, "value": 13},
{"group": 4, "value": 11}]
},
{"name":"D","textsize": 48, "proportions": [
{"group": 2, "value": 11},
{"group": 3, "value": 17},
{"group": 1, "value": 16},
{"group": 5, "value": 13},
{"group": 4, "value": 19}]
},
{"name":"E","textsize": 48, "proportions": [
{"group": 2, "value": 24},
{"group": 3, "value": 14},
{"group": 1, "value": 19},
{"group": 5, "value": 12},
{"group": 4, "value": 6}]
},
{"name":"F","textsize": 48, "proportions": [
{"group": 2, "value": 12},
{"group": 3, "value": 32},
{"group": 1, "value": 10},
{"group": 5, "value": 7},
{"group": 4, "value": 12}]
},
{"name":"G","textsize": 48, "proportions": [
{"group": 2, "value": 5},
{"group": 3, "value": 14},
{"group": 1, "value": 37},
{"group": 5, "value": 10},
{"group": 4, "value": 4}]
},
{"name":"H","textsize": 48, "proportions": [
{"group": 2, "value": 13},
{"group": 3, "value": 21},
{"group": 1, "value": 16},
{"group": 5, "value": 11},
{"group": 4, "value": 6}]
},
{"name":"I","textsize": 48, "proportions": [
{"group": 2, "value": 13},
{"group": 3, "value": 14},
{"group": 1, "value": 16},
{"group": 5, "value": 14},
{"group": 4, "value": 8}]
},
{"name":"J","textsize": 48, "proportions": [
{"group": 2, "value": 9},
{"group": 3, "value": 14},
{"group": 1, "value": 14},
{"group": 5, "value": 12},
{"group": 4, "value": 14}]
}
],
"links":[ {"source": 0, "target": 1, "linkdistance":156, "width":14}, {"source": 3, "target": 9, "linkdistance":156, "width":14} ]
}
あなたの回答
tips
プレビュー
