Question

我正在努力应对d3js的更新。如果取消注释，下面的代码不会更新值 - 实际上，初始布局会消失。我还想不通。我只想要更新价格。任何帮助将不胜感激。

更新

有人（匿名）更新http://jsfiddle.net/1qqdc0ns/11/ - 所以我正在研究这个。

我已将原始版本清理为http://jsfiddle.net/1qqdc0ns/12/，但仍未正确更新。

function update(data) {
    console.log("update " + data);

    var quotes = d3.select("#quoteContainer")
        .selectAll("div")
        .data(data);

    // ENTER
    var q = quotes.enter()
        .append("div")
        .attr("class", "quotePanel");
    var m = q.append("div").attr("class", "carmodel");
    var p = q.append("div").attr("class", "price");
    var f1 = p.append("span").attr("class", "bigFigure");
    var f2 = p.append("span").attr("class", "smallFigure");

    f1.text(function (d) {
        var priceStr = d["price"].toString();
        var bigFigure = priceStr.substr(0, 4);
        console.log("bigFigure: " + bigFigure);
        return bigFigure;
    });
    f2.text(function (d) {
        return "00";
    });

    quotes.select("div").text(function (d) {
        var modelname = d["symbol"];
        console.log("Setting model name " + modelname);
        return modelname;
    });

    //quotes.exit().remove();
}

function onclick() {

    update([{
        "symbol": "BMW",
            "price": 9000
    }, {
        "symbol": "PIGEOT",
            "price": 124
    }]);

};

d3.select('#update')
    .on("click", onclick);

update([{
    "symbol": "ASTON",
        "price": 3000
}, {
    "symbol": "MARTIN",
        "price": 6500
}]);

Answer 1

谢谢伊戈尔。解决方案是：

http://jsfiddle.net/Ihorad/1qqdc0ns/14/

function update(data) {
    var quotes = d3.select("#quoteContainer")
        .selectAll(".quotePanel")
        .data(data);

    var q = quotes.enter()
                .append("div")
                .attr("class", "quotePanel"); 
    var m = q.append("div").attr("class", "carmodel");
    var p = q.append("div").attr("class", "price");
    var f1 = p.append("span").attr("class", "bigFigure");
    var f2 = p.append("span").attr("class", "smallFigure");

    quotes.select(".carmodel").text(function (d) {
        var modelname = d["symbol"];
        return modelname;
    });
    quotes.select(".bigFigure").text(function (d) {
        var priceStr = d["price"].toString();
        var bigFigure = priceStr.substr(0, 4);
        return bigFigure;
    });
    quotes.select(".smallFigure").text(function (d) {
        return "00";
    });

    quotes.exit().remove();
}

d3js使用div和属性更新

1 个答案: