簡體   English   中英

d3有關從變量創建的表中獲取數據的問題(在D3.js v3.5.5中有效,但在v4.2.2中無效)

[英]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; });

這是關於mergeAPI 您可以在下面的代碼中看到它的運行情況:

 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM