Question

现在几天，我试图更新我的条形图。我知道我使用enter（）初始化图表和transition（）来更新值。不幸的是，它不起作用。我也读过，我必须＆＃34;绑定＆＃34;数据通过return（d），所以我可以更新它。我使用Eclipse，所以我的js代码不会产生任何错误信息，这使我几乎无法理解发生了什么，因为我并不熟悉js。

_targetDiv和myDiv完全相同，_data具有正确的值。

我只发布解决问题的方法。如果我调用addUpdatedChart（_data，_targetDiv），整个JSP就会被冻结。如果我发表评论或者不打电话，它就是一样的。如果我删除它，它至少会编译。

任何线索，我做错了什么？

        //Add chart to the tracker
        function addChart(myDiv)
        {
            //Create div
            var barDiv = document.createElement("div");
            barDiv.id = String(myDiv.id + "chart");
            barDiv.style.position= "absolute";
            barDiv.style.width = "20px";
            barDiv.style.height = "20px";
            myDiv.appendChild(barDiv);

            //Enter()
            var data = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

            //Create bar chart
            var color = d3.scale.ordinal()
            .range(["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#C0C0C0", "#FFCC00", "#FF3399", "#CCFFCC", "#CCFF66", "#CCFF00"]);
            var height = 10;

            var x = d3.scale.linear()
                .domain([0, d3.max(data)])
                .range([0, 100]);

            var y = d3.scale.linear()
                .domain([0, d3.max(height)])
                .range([0, height]);

            d3.select(String("#" + myDiv.id))
              .selectAll("div")
                .data(data)
              .enter().append("div")
                .style("width", function(d) { return x(d) + "px"; })
                .style("height", function(d) { return y(d) + "px"; })
                .style("background-color", function(d, i) {return color(i);})
                .style("font-size","10px")
                .style("opacity", 1.0)//Cant be below 1.0?
                .text(function(d) { return d; });
        }




        //Values for the chart update
        function addUpdatedChart(_data, _targetDiv)
        {
            //Update bar chart
            var color = d3.scale.ordinal()
            .range(["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#C0C0C0", "#FFCC00", "#FF3399", "#CCFFCC", "#CCFF66", "#CCFF00"]);
            var height = 10;

            var x = d3.scale.linear()
                .domain([0, d3.max(_data)])
                .range([0, 100]);

            var y = d3.scale.linear()
                .domain([0, d3.max(height)])
                .range([0, height]);

            d3.select(String("#" + _targetDiv))
              .selectAll("div")
                .data(_data)
              .transition().duration(1500)
                .style("width", x + "px")
                .style("height", y + "px")
                .style("background-color", color(i))
                .style("font-size","10px")
                .style("opacity", 1.0)//Cant be below 1.0?
                .text();
        }

如何正确更新d3.js条形图？

0 个答案: