Question

我是D3.js的新手，我已经能够从Health and Wealth of Nations示例创建一个适合我需要的简单动画。我在向SVG圈添加标签时遇到了一些麻烦，当我调查源时，我发现当我的数据集中的每个对象都附加了一个组时，所有的圈子都被添加到最后一个组中。

JSON数据：

{"numSegments":4,
"movement":[
    {"Id":"1",
    "xValues":[[0,350],[1,400],[2,350],[3,300],[4,350]],
    "yValues":[[0,690],[1,640],[2,590],[3,640],[4,690]]},
    {"Id":"2",
    "xValues":[[0,150],[1,150],[2,150],[3,150], [4, 150]],
    "yValues":[[0,690],[1,490],[2,690],[3,490],[4, 690]]},
    {"Id":"3",
    "xValues":[[0,550],[1,650],[2,550],[3,650],[4,550]],
    "yValues":[[0,690],[1,590],[2,490],[3,390],[4,490]]},
    {"Id":"4",
    "xValues":[[0,0],[1,200],[2,0],[3,200],[4,0]],
    "yValues":[[0,0],[1,200],[2,0],[3,200],[4,0]]}
    ]
}

相关JavaScript：

var chart = d3.select(".chart")
        .attr("width", width)
        .attr("height", height)

var g = chart.append("g")
            .selectAll(".node")
            .data(interpolateData(0));

var sections = g.enter().append("g")
            .attr("class", "node");

console.log(sections.size()); // this returns "4" as expected

var dot = sections.append("circle")
    .attr("class", "dot")
    .attr("fill", function (d) { return colour(key(d)); })
    .attr("r", "10")
    .call(position)
    .sort(order);

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

var text = sections.append("text")
    .text(function (d) { return key(d); })
    .call(positionText)
    .sort(order);

SVG输出：

<svg class="chart" width="700" height="700">
<g>
    <g class="node"></g>
    <g class="node"></g>
    <g class="node"></g>
    <g class="node">
        <circle class="dot" fill="#fff" r="10">
            <title>1</title>
        </circle>
        <circle class="dot" fill="#fff" r="10">
            <title>2</title>
        </circle>
        <circle class="dot" fill="#fff" r="10">
            <title>3</title>
        </circle>
        <circle class="dot" fill="#fff" r="10">
            <title>4</title>
        </circle>
        <text>1</text>
        <text>2</text>
        <text>3</text>
        <text>4</text>
    </g>
</g>

如果控制台报告部分的大小为4，那么它不是刚刚附加的四个<g>元素的数组吗？如果是这样，为什么 sections.append（）将四个元素添加到最后一个组而不是向四个组中的每个组添加一个元素？

D3.js - 为什么我的所有数据都被附加到最后一个附加组？

0 个答案: