web-dev-qa-db-ja.com

D3：d3.svg.diagonal（）をd3.svg.line（）に置き換えます

D3.svg.diagonal（）でレンダリングされたエッジを使用して次のグラフを実装しました。ただし、対角線をd3.svg.line（）に置き換えようとすると、ターゲットデータとソースデータがプルされていないように見えます。何が足りないのですか？ d3.svg.lineについて理解できないことがありますか？

enter image description here

以下は私が参照しているコードであり、その後に完全なコードが続きます。

var line = d3.svg.line()
    .x(function(d) { return d.lx; })
    .y(function(d) { return d.ly; });

.。

var link= svg.selectAll("path")
    .data(links)
  .enter().append("path")
    .attr("d",d3.svg.diagonal())
    .attr("class", ".link")
    .attr("stroke", "black")
    .attr("stroke-width", "2px")
    .attr("shape-rendering", "auto")
    .attr("fill", "none");

コード全体：

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width =1500, 
    height = 1500, 
    diameter = Math.min(width, height),
    radius = diameter / 2;


var balloon = d3.layout.balloon()
  .size([width, height])
  .value(function(d) { return d.size; })
  .gap(50)                  

var line = d3.svg.line()
    .x(function(d) { return d.lx; })
    .y(function(d) { return d.ly; });


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")")

    root = "flare.json";
    root.y0 = height / 2;
    root.x0 = width / 2;

d3.json("flare.json", function(root) {
  var nodes = balloon.nodes(root),
      links = balloon.links(nodes);


var link= svg.selectAll("path")
    .data(links)
  .enter().append("path")
    .attr("d",d3.svg.diagonal())
    .attr("class", ".link")
    .attr("stroke", "black")
    .attr("stroke-width", "2px")
    .attr("shape-rendering", "auto")
    .attr("fill", "none");   

  var node = svg.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  node.append("text")
      .attr("dx", function(d) { return d.x })
      .attr("dy", function(d) { return d.y })
      .attr("font-size", "5px")
      .attr("fill", "white")
      .style("text-anchor", function(d) { return d.children ? "middle" : "middle"; })
      .text(function(d) { return d.name; })
});

「line」を使用したときにsvgのd属性がどのように消えるかの比較。 enter image description hereenter image description here

javascriptd3.jssvgcircle-pack
19
Jakub Svec

質問はかなり古いですが、答えが見当たらず、誰かが同じ問題に直面する可能性があるので、ここにあります。

diagonalをlineに単純に置き換えることが機能しない理由は、d3.svg.lineが原因です。 とd3.svg.diagonalは異なる結果を返します：

  • d3.svg.diagonalは、データムとそのインデックスを受け入れ、projectionを使用してパスに変換する関数を返します。言い換えると、diagonal.projectionは、関数が指定されたデータムからポイントの座標を取得する方法を決定します。
  • d3.svg.lineは、線の点の配列を受け入れ、それをパスに変換する関数を返します。メソッドline.xおよびline.yは、指定された配列の単一要素から取得したポイントの座標を決定します

D3 SVG-形状リファレンス

SVGパスとD3.js

したがって、d3.svg.lineの結果をd3の選択に直接使用することはできません（少なくとも複数の線を描画する場合）。

次のような別の関数でラップする必要があります。

var line = d3.svg.line()
                 .x( function(point) { return point.lx; })
                 .y( function(point) { return point.ly; });

function lineData(d){
    // i'm assuming here that supplied datum 
    // is a link between 'source' and 'target'
    var points = [
        {lx: d.source.x, ly: d.source.y},
        {lx: d.target.x, ly: d.target.y}
    ];
    return line(points);
}

// usage:
var link= svg.selectAll("path")
    .data(links)
    .enter().append("path")
    .attr("d",lineData)
    .attr("class", ".link")
    .attr("stroke", "black")
    .attr("stroke-width", "2px")
    .attr("shape-rendering", "auto")
    .attr("fill", "none");

JsFiddlemobeetsの作業バージョンが投稿されました： jsFiddle

22
elusive-code

おそらく、対角関数をカプセル化してそのパラメーターを編集すると、次のように機能する可能性があります。

var diagonal = d3.svg.diagonal();
var new_diagonal = function (obj, a, b) {
    //Here you may change the reference a bit.
    var nobj = {
        source : {
            x: obj.source.x,
            y: obj.source.y
        },
        target : {
            x: obj.target.x,
            y: obj.target.y
        }
    }
    return diagonal.apply(this, [nobj, a, b]);
}
var link= svg.selectAll("path")
    .data(links)
    .enter().append("path")
    .attr("d",new_diagonal)
    .attr("class", ".link")
    .attr("stroke", "black")
    .attr("stroke-width", "2px")
    .attr("shape-rendering", "auto")
    .attr("fill", "none");
2
natanael

私は同じ問題を抱えていました... jsFiddleがあります ここ 。

lineをdiagonalに変更すると機能することに注意してください。

2
mobeets

リンクのd属性を行に設定するだけです。

.attr("d", line)
1
Christopher Chiche