Question

我刚开始玩D3.js，我似乎无法弄清楚如何根据我的数据创建嵌套结构。

当前代码：

var g = svg.append("g").attr("class","top").selectAll(".link")
    .data(graph.links)
    .enter()

var link = g.append("path")
    .attr("class", "link")
    .attr("d", path)
    .style("stroke-width", function(d) { return Math.max(1, d.dy); })
    .style("stroke", function(d) { return d.color })
    .sort(function(a, b) { return b.dy - a.dy; });

link.append("title")
    .text(function(d) { return d.title; });

var bbox = link.node().getBBox();

link.append("rect")
  .attr("class","rect")
  .attr("x", function() { return Math.floor(bbox.x + bbox.width/2.0) - 26; })
  .attr("y", function() { return Math.floor(bbox.y + bbox.height/2.0) - 26; })
  .attr("width", "52")
  .attr("height", "52")
  .attr("fill", "black");

link.append("svg:image")
  .attr("class","image")
  .attr("x", function(d) { return Math.floor(bbox.x + bbox.width/2.0) - 25; })
  .attr("y", function(d) { return Math.floor(bbox.y + bbox.height/2.0) - 25; })
  .attr("width", "50")
  .attr("height", "50")
  .attr("xlink:href", function(d) { return d.image; });

var node = svg.append("g").selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(d3.behavior.drag()
        .origin(function(d) { return d; })
        .on("dragstart", function() { this.parentNode.appendChild(this); })
        .on("drag", dragmove)
    );

function dragmove(d) {
    d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
    sankey.relayout();
    link.attr("d", path);
}

这给出了结构

<g>
    <path ... >
        <title ... >
        <rect ... >
        <image ... >
    <path ... >
        <title ... >
        <rect ... >
        <image ... >
</g>

但我想要的是

<g>
    <g>
        <path ... >
            <title ... >
        <rect ... >
        <image ... >
    </g>
    <g>
        <path ... >
            <title ... >
        <rect ... >
        <image ... >
    </g>
</g>

因为那时我可以显示和隐藏矩形和图像。到目前为止我所做的所有尝试都打破了拖拉功能......

修改：当前状态here

的jsFiddle

Answer 1

您要将矩形和图像附加到link变量。你应该将它们附加到g。试一试：

var gEnter = svg.append("g").attr("class","top").selectAll(".link")
    .data(graph.links)
    .enter()


var g = gEnter.append("g");

var link = g.append("path")
    .attr("class", "link")
    .attr("d", path)
    .style("stroke-width", function(d) { return Math.max(1, d.dy); })
    .style("stroke", function(d) { return d.color });

link.append("title")
    .text(function(d) { return d.title; });

var bbox = link.node().getBBox();

g.append("rect")
  .attr("class","rect")
  .attr("x", function() { return Math.floor(bbox.x + bbox.width/2.0) - 26; })
  .attr("y", function() { return Math.floor(bbox.y + bbox.height/2.0) - 26; })
  .attr("width", "52")
  .attr("height", "52")
  .attr("fill", "black");

g.append("svg:image")
  .attr("class","image")
  .attr("x", function(d) { return Math.floor(bbox.x + bbox.width/2.0) - 25; })
  .attr("y", function(d) { return Math.floor(bbox.y + bbox.height/2.0) - 25; })
  .attr("width", "50")
  .attr("height", "50")
  .attr("xlink:href", function(d) { return d.image; });

创建嵌套输出

1 个答案: