Question

我停留在函数调用中以更新图表中的数据。调用了add()函数，但它只会在第一次正确更改数据。代码如下：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];

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

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

d3.select("body").append("button").text("Randomize")
    .attr("onclick","add()");

d3.select("body").append("button").text("Pie").attr("onclick","drawpie()");

function drawpie(){
    var w = 300;
            var h = 300;

            var dataset = [ 5, 10, 20, 45, 6, 25 ];

            var outerRadius = w / 2;
            var innerRadius = 70;
            var arc = d3.svg.arc()
                            .innerRadius(innerRadius)
                            .outerRadius(outerRadius);

            var pie = d3.layout.pie();

            //Easy colors accessible via a 10-step ordinal scale
            var color = d3.scale.category10();

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Set up groups
            var arcs = svg.selectAll("g.arc")
                          .data(pie(data))
                          .enter()
                          .append("g")
                          .attr("class", "arc")
                          .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

            //Draw arc paths
            arcs.append("path")
                .attr("fill", function(d, i) {
                    return color(i);
                })
                .attr("d", arc);

            //Labels
            arcs.append("text")
                .attr("transform", function(d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function(d) {
                    return d.value;
                });
}


function add(){
    console.log("call");

    d3.select(".chart").selectAll("div").each(function(d) {
        console.log("each");
            d3.select(this)
                .style("width", function(d) { return 50 + x(d) + "px"; })
                .text(function(d){return +(+d + 1)});
                /*.transition()
                .delay(1000)
                .duration(2000);*/
        })      
}


</script>

请您告诉我如何纠正它？

Answer 1

我认为大部分问题都是函数调用错误。我基本上修复了这个并简化了你的添加功能...不确定这是不是你想要的，但它应该让你去...这里是FIDDLE。

d3.select("body")
    .append("button")
    .text("Randomize")
    .on("click",add);

d3.select("body")
    .append("button")
    .text("Pie")
    .on("click",drawpie);

UPDATED FIDDLE，其中包含数据的随机函数。

关于更新图表数据的D3.js

1 个答案: