Question

我正在使用d3创建堆积的条形图。我在前端有按钮。在单击按钮时，应显示图表。但是图表未显示，并发出以下警告。

”在“ d3”中找不到导出“比例”（导入为“ d3”）”

”在“ d3”中找不到导出“时间”（导入为“ d3”）”

import * as d3 from 'd3';

export class stackedbarchart {

    sbar(box_id){
      const data=[{"country":"India","sales":100,"profit":100}, 
                  {"country":"US","sales":70,"profit":100}, 
                  {"country":"USA","sales":65,"profit":100}];
    const svgWidth = 500, svgHeight = 200;
    const margin = { top: 10, right: 20, bottom: 70, left: 40 };
    const width = svgWidth - margin.left - margin.right;
    const height = svgHeight - margin.top - margin.bottom;
    const contentWidth = 400;
    const contentHeight = 120;
    const headers=["sales", "profit"]

    const svg = d3
      .select(box_id)
      .append('svg')
      .attr("width", svgWidth)
      .attr("height", svgHeight);

      const dataset = d3.layout.stack()(headers.map(function(values) 
           { 
        return data.map(function(d)
                          { return {x: d.country, y: +d[values]};
        });
      }));

      var x = d3.scaleOrdinal()   
                .domain(dataset[0].map(function(d) { return d.x; }))   
                .rangeRoundBands([10, width-10], 0.02);

      var y = d3.scaleLinear()   
                .domain([0, d3.max(dataset, function(d) {   
                 return d3.max(d, function(d) { return d.y0 + d.y; 
                 });  })])     
                .range([height, 0]);

     var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];

     var yAxis = d3.svg.axis()   
                   .scale(y)  
                   .orient("left")   

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

         svg.append("g") 
            .attr("class", "y axis")   
            .call(yAxis);

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

        var groups = svg.selectAll("g.cost")  
                        .data(dataset)  
                        .enter()
                        .append("g") 
                        .attr("class", "cost")  
                        .style("fill", function(d, i)  
                                           { return colors[i]; });

        var rect = groups.selectAll("rect")   
                         .data(function(d)
                                 { return d; }) 
                         .enter()   
                         .append("rect")  
                         .attr("x", function(d)
                                      { return x(d.x); })   
                         .attr("y", function(d) 
                                      { return y(d.y0 + d.y); })   
                         .attr("height", function(d)
                                           { return y(d.y0) - y(d.y0 + d.y); })   
                          .attr("width", x.rangeBand())   
                          .on("mouseover", function()
                                            { tooltip.style("display", null); })  
                          .on("mouseout", function() 
                                            { tooltip.style("display", "none"); })  
                          .on("mousemove", function(d) {
       var xPosition = d3.mouse(this)[0] - 15;
       var yPosition = d3.mouse(this)[1] - 25;
           tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
           tooltip.select("text").text(d.y);   });

      var legend = svg.selectAll(".legend")  
                      .data(colors)  
                      .enter().append("g")   
                      .attr("class", "legend") 
                      .attr("transform", function(d, i)
                                           { return "translate(30," + i * 19 + ")"; });  
                legend.append("rect") 
                      .attr("x", width - 18)   
                      .attr("width", 18)  
                      .attr("height", 18)  
                      .style("fill", function(d, i)
                                       {return colors.slice().reverse()[i];});  
                legend.append("text") 
                      .attr("x", width + 5)  
                      .attr("y", 9) 
                      .attr("dy", ".35em")  
                      .style("text-anchor", "start")   
                      .text(function(d, i) { 
                              switch (i) {
                                 case 0: return "sales";
                                 case 1: return "profit";
                               }   });

       var tooltip = svg.append("g") 
                        .attr("class", "tooltip") 
                        .style("display", "none");
                     tooltip.append("rect") 
                            .attr("width", 30)  
                            .attr("height", 20) 
                            .attr("fill", "white")   
                            .style("opacity", 0.5);

                     tooltip.append("text") 
                            .attr("x", 15) 
                            .attr("dy", "1.2em") 
                            .style("text-anchor", "middle")   
                            .attr("font-size", "12px")  
                            .attr("font-weight", "bold");
    }
}

任何帮助或向正确方向的提示将不胜感激。

Answer 1

似乎您已在开发环境中安装了d3.js V5.x，而您正在使用D3.js V3语法/ api编写代码。

例如

d3.layout.stack()是now d3.stack()

d3.svg.axis().scale(x).orient('bottom')现在为d3.axisBottom(x)

d3.svg.axis().scale(y).orient('left')现在为d3.axisLeft(y);

在版本之间进行迁移时，您应该检出最新的documentation以及changelog

如何使用D3图表创建堆叠的条形图？

1 个答案: