Question

我正在使用d3 js（d3.v3.min.js），并希望在从JSON格式的查询中获取数据后动态更新新数据的条形图。这是我的完整代码

    var data = jsondata;
        // sample data

        //     var data = [{"year":"04-10-2018","value":"20"},
        //    {"year":"05-10-2018","value":"40"},
        //    {"year":"06-10-2018","value":"60"},
        //    {"year":"07-10-2018","value":"80"},
        //    {"year":"08-10-2018","value":"100"},
        //    {"year":"09-10-2018","value":"120"}];

         var margin = {top: 50, right: 50, bottom: 90, left: 50},
         width = 500 - margin.left - margin.right,
         height = 380 - margin.top - margin.bottom;

        var parseDate = d3.time.format("%d").parse;
        var formatTime = d3.time.format("%a");
        var formatxAxis = d3.format('.0f');

        var x = d3.scale.ordinal()
            .rangeRoundBands([0, width],.50);

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

        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(formatTime);

        var yAxis = d3.svg.axis()
            .scale(y)
            .tickFormat(formatxAxis)
            .orient("left")
            .ticks(5);

        var div = d3.select("#Graph").append("div") 
            .attr("class", "tooltip")               
            .style("opacity", 0);

        var svg = d3.select("#Graph").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

              data.forEach(function(d) {
                d.year = parseDate(d.year);
                d.value = +d.value;
            });

        x.domain(data.map(function(d) { return d.year; }));
        y.domain([0, d3.max(data, function(d) { return d.value; })]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Value");

function  updateChart(){

        var bar = svg.selectAll(".bar").data(data)

        // bar update after removing previous bar graph on div

        bar.exit().remove();

        bar.enter().append("rect")
            .attr("class", "bar x-axis")   
            .attr("width", x.rangeBand())  
            .attr("x", function(d) { return x(d.year); })
            .attr("y", function(d) { return y(d.value); })
            .attr("height", function(d) { return height - y(d.value); })
        //    .on("click", function(d){show();})
            .style("fill",'#BDC6E7') 
           .on("mouseover", function(d) {      
                    div.transition()        
                        .duration(200)      
                        .style("opacity", .9);      
                    div .html(formatTime(d.year) + "<br/>"  + d.value)  
                        .style("left", (d3.event.pageX ) + "px")     
                        .style("top", (d3.event.pageY - 28) + "px");    
                    })                  
                .on("mouseout", function(d) {       
                    div.transition()        
                        .duration(500)      
                        .style("opacity", 0);   
                });
}
 updateChart();

正如我已经提到这个给定问题的链接UPDATE BAR CHART 并尝试使用他们的解决方案bar.exit().remove();删除以前的新图形条形图，但它没有解决，因为图表不是用我的新数据更新。

当我尝试在inspect元素控制台中检查我的图形更改活动时，我发现它创建了两个SVG＆＃39;一个数据，另一个数据不包含任何数据。

所以我没有弄清楚我做错了什么，所以请有人可以帮助我吗？

Answer 1

在更新条形图后面临很多问题后，我决定在每次新数据更新时清除SVG，因为每当我尝试更新图形时，它会在同一个div上创建另一个SVG，而不是更新相同的SVG。

所以我使用此代码if [[ "$OSTYPE" == "linux-gnu" ]]; then # ... elif [[ "$OSTYPE" == "darwin"* ]]; then # Mac OSX elif [[ "$OSTYPE" == "cygwin" ]]; then # POSIX compatibility layer and Linux environment emulation for Windows elif [[ "$OSTYPE" == "msys" ]]; then # Lightweight shell and GNU utilities compiled for Windows (part of MinGW) elif [[ "$OSTYPE" == "win32" ]]; then # I'm not sure this can happen. elif [[ "$OSTYPE" == "freebsd"* ]]; then # ... else # Unknown. fi来清除现有的svg而不在新数据更新上创建另一个svg。

所以这是我的完整代码

d3.select("#Graph").select("div").remove();

更新新数据的条形图

1 个答案: