[英]Migrating from D3.js v3 to D3.js v4 not working - a select issue?
[英]d3 issue with getting data out of a table created from a variable (works in D3.js v3.5.5 but not in v4.2.2)
在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上不起作用
有任何想法嗎?
您正在使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.