d3有关从变量创建的表中获取数据的问题（在D3.js v3.5.5中有效，但在v4.2.2中无效）

Question

在Google Chrome版本52.0.2743.116 m（64位）中执行以下D3.js代码（版本4.2.2）后：

var svg =   d3.select("body").append("svg")
            .attr("width", 250)
            .attr("height", 250);

function render(data)
{
    //Bind Data
    var circles = svg.selectAll("circle").data(data);

    //Enter
    circles.enter().append("circle")
    .attr("r", 10);

    //Update
    circles
    .attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; });

    //Exit
    circles.exit().remove();
}

var myArrayOfObjects = 
[
    { x: 100, y: 100},
    { x: 130, y: 120},
    { x: 60, y: 80},
    { x: 70, y: 110},
    { x: 90, y: 30},
    { x: 20, y: 10}
];

render(myArrayOfObjects);

我在控制台（元素部分）中获得以下HTML代码：

 <html> <head> <meta charset="UTF-8"> <title>D3 Data binding</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> </head> <script>...</script> <svg width="250" height="250"> <circle r="10"></circle> <circle r="10"></circle> <circle r="10"></circle> <circle r="10"></circle> <circle r="10"></circle> <circle r="10"></circle> </svg> </html>

这导致：

但我想实现这一目标：

我必须做到这一点

有人知道我的代码有什么问题吗？ 我的控制台没有显示任何错误。

编辑：我只是试图在3.5.5中运行它，它的工作。 只是在4.2.2上不起作用

有任何想法吗？

Answer 1

您正在使用D3 v4.x。 在这种情况下，您必须merge选择：

circles.enter().append("circle")
    .attr("r", 10).merge(circles)
    .attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; });

这是关于merge的API 。 您可以在下面的代码中看到它的运行情况：

 var svg = d3.select("body").append("svg") .attr("width", 250) .attr("height", 250); function render(data) { //Bind Data var circles = svg.selectAll("circle").data(data); //Exit circles.exit().remove(); //Enter and Update circles.enter().append("circle") .attr("r", 10).merge(circles) .attr("cx", function(d){ return dx; }) .attr("cy", function(d){ return dy; }); } var myArrayOfObjects = [ { x: 100, y: 100}, { x: 130, y: 120}, { x: 60, y: 80}, { x: 70, y: 110}, { x: 90, y: 30}, { x: 20, y: 10} ]; render(myArrayOfObjects);

 <script src="https://d3js.org/d3.v4.min.js"></script>

d3有关从变量创建的表中获取数据的问题（在D3.js v3.5.5中有效，但在v4.2.2中无效）

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-26 10:23:06

d3有关从变量创建的表中获取数据的问题（在D3.js v3.5.5中有效，但在v4.2.2中无效）

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-26 10:23:06

解决方案1
0 已采纳 2016-08-26 10:23:06