d3.js - コードダイアグラムの形状を円から楕円形に変更するには?

Question

d3jsでコードダイアグラムを作りたいです。これが私が実装しているサンプルコードです:

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<svg width="960" height="960"></svg>
<script>
d3.text("data.csv", function(error, datas) {
var dataf = d3.csv.parseRows(datas);

dataf.shift();

var text = [];
var nest = d3.nest()
    .key(function(d) { return d[1]; })
    .entries(dataf)
    .sort(function(a, b) { return a.key < b.key ? -1 : 1; });
nest.forEach(function(d) {
    text.push(d.key);
});
nest = d3.nest()
    .key(function(d) { return d[2]; })
    .entries(dataf)
    .sort(function(a, b) { return a.key < b.key ? -1 : 1; });
nest.forEach(function(d) {
    text.push(d.key);
});
var textnested = [];
d3.nest()
    .key(function(d) { return d; })
    .entries(text)
    .forEach(function(d) {
        textnested.push(d.key);
    });
if(textnested.length < text.length) {
    var inDirection = 1;
    text = textnested;
    text.sort(function(a, b) { return a < b ? -1 : 1; });
}
nest = d3.nest()
    .key(function(d) { return d[0]; })
    .entries(dataf);
if(nest.length < dataf.length) {
    nest.forEach(function(d) {
        d.values.forEach(function(e) { e.push(1/d.values.length); });
    });
}

var matrix = [];
text.forEach(function(d, i) {
matrix[i] = d3.range(text.length).map(function() { return 0; });
});
dataf.forEach(function(d) {
var x = text.indexOf(d[1]),
    y = text.indexOf(d[2]);
if(nest.length < dataf.length) matrix[x][y]+=d[d.length-1];
else matrix[x][y]++;
if(!inDirection) {
    if(nest.length < dataf.length) matrix[y][x]+=d[d.length-1];
    else matrix[y][x]++;
}
});
var chord = d3.layout.chord()
.padding(.04)
.matrix(matrix);
 var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(480, 480)");
 var fill = d3.scale.category20();
 var g = svg.selectAll(".group")
.data(chord.groups)
.enter()
.append("g")
.attr("class", "group");
 g.append("path")
.attr("d", d3.svg.arc().innerRadius(350).outerRadius(370))
.style("fill", function(d) { return fill(d.index); })
.on("mouseover", standOut(0.1))
.on("mouseout", standOut(1));
 g.append("text")
.attr("transform", function(d) {
     return "rotate("+(((d.startAngle+d.endAngle)/2) * (180/Math.PI) -    90)+")"
        + "translate(376)" + (((d.startAngle+d.endAngle)/2) > Math.PI ? "rotate(180)" : "");    })
.attr("text-anchor", function(d) { return       ((d.startAngle+d.endAngle)/2) > Math.PI ? "end" : ""; })
.text(function(d) { return text[d.index]; });
svg.selectAll(".chord")
.data(chord.chords)
.enter()
.append("path")
.attr("class", "chord")
.attr("d", d3.svg.chord().radius(350))
.style("fill", function(d) { return fill(d.source.index); })
.style("stroke", function(d) { return   d3.rgb(fill(d.source.index)).darker(); });
function standOut(o) {
return function(d, i) {
    var gstandout = [];
    svg.selectAll(".chord")
        .each(function(e) { e.source.index == i ?  gstandout.push(e.target.index) : e.target.index == i ? gstandout.push(e.source.index) : ""; })
        .filter(function(e) { return e.source.index != i && e.target.index != i; })
        .style("opacity", o);
    svg.selectAll(".group")
        .filter(function(e, j) { return gstandout.indexOf(j) == -1 && j != i; })
        .style("opacity", o);
};
}
});
</script>
 </body>

以下は data.csv ファイルです。

"CitingArticle","Cited","Subject"
"Locke et al., 2015","Laosinchai, P.","Agricultural and Biological  Sciences"
"Locke et al., 2015","Laosinchai, P.","Biochemistry, Genetics and Molecular Biology"
"Yasri, 2015","Yasri, P.","Social Sciences"
 "Yang et al., 2015","Panjaburee, P.","Computer Science"
 "Yang et al., 2015","Panjaburee, P.","Social Sciences"
 "Chu et al., 2015","Panjaburee, P.","Computer Science"
 "Chu et al., 2015","Panjaburee, P.","Social Sciences"
 "Yang et al., 2015","Panjaburee, P.","Computer Science"
 "Yang et al., 2015","Panjaburee, P.","Social Sciences"
  "Chu et al., 2015","Panjaburee, P.","Computer Science"
 "Chu et al., 2015","Panjaburee, P.","Social Sciences"
 "Buaraphan & Abedin Forhad, 2015","Buaraphan, K.","Social Sciences"
 "Kim & Choi, 2015","Yodyingyong, S.","Chemical Engineering"
  "Kim & Choi, 2015","Yodyingyong, S.","Chemistry"
  "Kim & Choi, 2015","Yodyingyong, S.","Engineering"
  "Kim & Choi, 2015","Yodyingyong, S.","Materials Science"
  "Kim & Choi, 2015","Yodyingyong, S.","Physics and Astronomy"
  "Bretz & McClary, 2015","Ratanaroutai, T.","Chemistry"
  "Bretz & McClary, 2015","Ratanaroutai, T.","Social Sciences"
   "Panijpan et al., 2015","Sriwattanarothai, N.","Biochemistry, Genetics and Molecular Biology"
  "Panijpan et al., 2015","Sriwattanarothai, N.","Medicine"
  "Durand & Borsa, 2015","Sriwattanarothai, N.","Agricultural and Biological Sciences"
  "Durand & Borsa, 2015","Sriwattanarothai, N.","Biochemistry, Genetics and Molecular Biology"
  "Durand & Borsa, 2015","Sriwattanarothai, N.","Immunology and Microbiology"
 "Durand & Borsa, 2015","Sriwattanarothai, N.","Medicine"
 "Vu et al., 2015","Yodyingyong, S.","Chemical Engineering"
 "Vu et al., 2015","Yodyingyong, S.","Environmental Science"
 "Chang et al., 2015","Yodyingyong, S.","Materials Science"
 "Zhang et al., 2015","Ketpichainarong, W.","Social Sciences"
 "Buaraphan & Abedin Forhad, 2015","Buaraphan, K.","Social Sciences"
 "Cil, 2015","Buaraphan, K.","Social Sciences"
 "Buaraphan & Abedin Forhad, 2015","Buaraphan, K.","Social Sciences"
 "Di Russo et al., 2015","Chenprakhon, P.","Biochemistry, Genetics and Molecular Biology"
 "De Sancho et al., 2015","Chenprakhon, P.","Chemistry"
 "De Sancho et al., 2015","Chenprakhon, P.","Computer Science"
 "Cazade et al., 2015","Chenprakhon, P.","Chemistry"
 "Cazade et al., 2015","Chenprakhon, P.","Medicine"
 "Cazade et al., 2015","Chenprakhon, P.","Physics and Astronomy"

しかし、弦を円形ではなく楕円形で表示したいのです。誰でもそれがどのように可能になるか考えていますか? あなたの助けは非常に高く評価されています。

score 0 · Accepted Answer

まず第一に、弦は円としてではなく、描画の中心に単一の制御点を持つベジエ曲線として描かれます (これは円のように見えます)。「楕円のような」効果を得るために、2 つの制御点を縁の近くに配置することを提案します。

このような弧を最初から描く方法はわかりませんが、d描いた後にパスの属性を編集することは可能です。

これが私のeditPath機能です：

function editPath() {
    var ratio = 0.6;
    var path=d3.select(this).attr("d")
    console.log(path);
    find=path.match(/([\-\.0-9]+)\,([\-\.0-9]+)Q 0,0 ([\-\.0-9]+),([\-\.0-9]+)/);
    if (!find) return;

    path=path.replace(/Q 0,0/,"C "+find[1]*ratio+","+find[2]*ratio+" "+find[3]*ratio+","+find[4]*ratio);

    console.log(path);
    d3.select(this).attr("d", path)
}

この関数は次のことを行います。

パスコマンドを抽出します ( path)
を中心とするベジエ曲線 ( Q) を特定する0,0
始点と終点の座標を抽出する (配列find)
新しい制御点の座標を計算します (find[i]*ratio)
これを新しいベジエ曲線に挿入します (2 つの制御点を使用C) 。
元のパスを新しいパスに置き換えます

これは、パス内の 1 つのベジエカーブのみを置き換えるため、コードごとに 2 回呼び出す必要があります。

[...]
 .attr("class", "chord")
 .attr("d", d3.svg.chord().radius(350))
 .each(editPath).each(editPath) //call twice!

この例でこれをテストしました: http://bl.ocks.org/mbostock/raw/4062006/ ...そこで動作しますd3.svg.chord。

d3.js - コード ダイアグラムの形状を円から楕円形に変更するには?

1 に答える 1

Related

Reference

d3.js - コードダイアグラムの形状を円から楕円形に変更するには?