简体   繁体   中英

All data is in enter() placeholder (D3)

I've got an update function with this code:

// actualy fetched from server. array of JS objects that I parsed to right type
var xData = [{
    id: 234234 // parsed as integer
    date: 15/11/2001 // parsed as date
    price: 6512 // parsed as integer
}];

// triggred by the user
function updateSVG() {

 // fetch new data from ther server
 xData = [];
 xData = [{
    id: 234234 // parsed as integer
    data: 15/11/2001 // parsed as date
    price: 6512 // parsed as integer
}];

 // join data
 var x = svg.selectAll(".x-class")
     .data(xData, function(d) { return d.id; });

 // new data
 x.enter().append("image")
     .attr('class', 'x-class')
     .attr("xlink:href", "x-image.png")
     .attr("width", 16)
     .attr("height", 19)
     .attr('y', 0);

 // current and new data
 x.transition()
     .attr("x", function(d) { return x(d.date); })
     .attr("y", function(d) { return y(d.date); });

 /// old data
 x.exit().remove();

}

What I expect is when I run this function the second or third time, most of the data will be UPDATE (ie not in enter), and just a few of the data will be in enter() and exit().

But all my data is in enter(). No matter what. The d.id is unique for sure. Everything works well as expected but this issue. When I inspect the x object before and after I fetche the new data, all my data is in the enter() placeholder.

Any ideas? What am I missing?

Code problems (Let us know if any of these help):

  1. What is x in the case of x(d.date) ? Do you mean xData here?

    x.attr("x", function(d) { return x(d.date); })

  2. What is this doing? You haven't defined data , or y . (or arrayObjectIndexOf and yOffset but I suspect those are as implied)

    return y(data[arrayObjectIndexOf(data, d.date, 'date')].price) - yOffset;

Also, since D3 is a data manipulation library, it's usually more difficult to help when we don't know what your data looks like. Sometimes we get an idea ( d.date ) but it could be important here (since you're apparently finding a price elsewhere instead of doing d.price )

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM