Question

如何在d3 v4中制作可点击的转换条形图？

当前代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: A bar chart that transitions to new data!</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>

        <p>Click on this text to update the chart with new data values (once).</p>

        <script type="text/javascript">
            //Width and height
            var w = 600;
            var h = 250;

            var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                            11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

            var xScale = d3.scaleBand()
                            .rangeRound([0, w])
                            .padding(0.05);

            var yScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset)])
                            .range([0, h]);

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            //Create bars
            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return xScale(i);
               })
               .attr("y", function(d) {
                    return h - yScale(d);
               })
               .attr("width", xScale.bandwidth())
               .attr("height", function(d) {
                    return yScale(d);
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d * 10) + ")";
               });
            //Create labels
            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d;
               })
               .attr("text-anchor", "middle")
               .attr("x", function(d, i) {
                    return xScale(i) + xScale.bandwidth() / 2;
               })
               .attr("y", function(d) {
                    return h - yScale(d) + 14;
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "white");
            //On click, update with new data            
            d3.select("p")
                .on("click", function() {
                    //New values for dataset
                    dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
                                5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];
                    //Update all rects
                    svg.selectAll("rect")
                       .data(dataset)
                       .transition()                                // <-- This makes it a smooth transition!
                       .attr("y", function(d) {
                            return h - yScale(d);
                       })
                       .attr("height", function(d) {
                            return yScale(d);
                       })
                       .attr("fill", function(d) {
                            return "rgb(0, 0, " + (d * 10) + ")";
                       });
                    //Update all labels
                    svg.selectAll("text")
                       .data(dataset)
                       .text(function(d) {
                            return d;
                       })
                       .attr("x", function(d, i) {
                            return xScale(i) + xScale.band() / 2;
                       })
                       .attr("y", function(d) {
                            return h - yScale(d) + 14;
                       });

                });

        </script>
    </body>
</html>

以上代码： https://github.com/alignedleft/d3-book/blob/master/chapter_09/05_transition.html http://examples.oreilly.com/0636920026938/chapter_09/05_transition.html

将代码切换到v4后出现错误。我修复了我所知道的错误，但现在我在JavaScript控制台中收到了这些错误：

错误：属性x：预期长度，“NaN”。

Answer 1

您没有设置x比例的域：

var xScale = d3.scaleBand()
    .domain(d3.range(dataset.lengh))
    .rangeRound([0, w])
    .padding(0.1);

另外，请注意不存在的xScale.band()：它应该是xScale.bandwidth()。

这是一个工作代码，域名为：

var w = 600;
 var h = 250;

 var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
   11, 12, 15, 20, 18, 17, 16, 18, 23, 25
 ];

 var xScale = d3.scaleBand()
   .domain(d3.range(dataset.length))
   .rangeRound([0, w])
   .padding(0.1);

 var yScale = d3.scaleLinear()
   .domain([0, d3.max(dataset)])
   .range([0, h]);

 //Create SVG element
 var svg = d3.select("body")
   .append("svg")
   .attr("width", w)
   .attr("height", h);
 //Create bars
 svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
     return xScale(i);
   })
   .attr("y", function(d) {
     return h - yScale(d);
   })
   .attr("width", xScale.bandwidth())
   .attr("height", function(d) {
     return yScale(d);
   })
   .attr("fill", function(d) {
     return "rgb(0, 0, " + (d * 10) + ")";
   });
 //Create labels
 svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
     return d;
   })
   .attr("text-anchor", "middle")
   .attr("x", function(d, i) {
     return xScale(i) + xScale.bandwidth() / 2;
   })
   .attr("y", function(d) {
     return h - yScale(d) + 14;
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "white");
 //On click, update with new data            
 d3.select("p")
   .on("click", function() {
     //New values for dataset
     dataset = [11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
       5, 10, 13, 19, 21, 25, 22, 18, 15, 13
     ];
     //Update all rects
     svg.selectAll("rect")
       .data(dataset)
       .transition() // <-- This makes it a smooth transition!
       .attr("y", function(d) {
         return h - yScale(d);
       })
       .attr("height", function(d) {
         return yScale(d);
       })
       .attr("fill", function(d) {
         return "rgb(0, 0, " + (d * 10) + ")";
       });
     //Update all labels
     svg.selectAll("text")
       .data(dataset)
       .text(function(d) {
         return d;
       })
       .attr("y", function(d) {
         return h - yScale(d) + 14;
       });

   });

<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Click on this text to update the chart with new data values (once).</p>

如何在d3 v4中制作可点击的过渡条形图？

1 个答案: