Question

我将数据作为json获取并绘制它，但每次绘制图表时都会将其绘制在旧图表上我怎么能动态地做它。所以我可以绘制图表而不在旧图纸上绘制

这是代码：

var xScale = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var yScale = d3.scale.linear()
        .range([barHeight, 0]);

    xScale.domain(data4.map(function(d) { return d.x; }));
    yScale.domain([0, d3.max(data4, function(d) { return d.y; })]);
    //x and y Axes
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");     
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");            
    //create svg container
    var svg = d3.select("#barchart")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", barHeight + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");        
    //create bars
    svg.selectAll(".bar")
        .data(data4)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return xScale(d.x); })
        .attr("width", xScale.rangeBand())
        .attr("y", function(d) { return yScale(d.y); })
        .attr("height", function(d) { return barHeight - yScale(d.y); });
    //drawing the x axis on svg
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + barHeight + ")")
        .call(xAxis);
    //drawing the y axis on svg
    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("Reviews Number");

请帮忙！

Answer 1

我能想到的一个原因是你正在做的更新功能

d3.select("#barchart")
        .append("svg")

这意味着每次调用该函数时，它都会向SVG DOM附加一个新的barchart。

所以在你追加新的svg之前，请删除旧版本：

d3.select("#barchart").select("svg").remove();//remove old svg
//now append the new svg
d3.select("#barchart")
        .append("svg")

希望这有帮助！

如何使用angularjs在d3js中制作动态条形图

1 个答案: