将D3-v3条形图配置为D3-v4

Question

我已经处理过从D3-V3到D3-V4复制条形图

有人知道为什么我看不到下一个链接的条形图：

https://d3responsive.firebaseapp.com/prueba.html

谢谢。

Answer 1

（如果你没有做出最低努力来写一个体面的解释，那你就很难回答你的问题。我编辑了你的{{3}为了让它更具可读性，但我没有这样做再次，这应该是你的兴趣）

你的秤是错误的。您将y比例用于x位置，x比例用于y位置。

所以，而不是：

var yScale = d3.scaleBand()
    .domain(dataset2.map(function(entry) {
        return entry.keybcr;
    }))
    .range([30, width - 30]);

var xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset2, function(d) {
        return d.valuebcr;
    })])
    .range([height - 30, 30]);

应该是：

var xScale = d3.scaleBand()
    .domain(dataset2.map(function(entry) {
        return entry.keybcr;
    }))
    .range([30, width - 30]);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset2, function(d) {
        return d.valuebcr;
    })])
    .range([height - 30, 30]);

这是你的（工作）代码：

＆＃13;

＆＃13;

  var dataset2 = [
    {keybcr:"Uno",       valuebcr:132},
    {keybcr:"Dos",       valuebcr:71},
    {keybcr:"Tres",      valuebcr:337},
    {keybcr:"Cuatro",    valuebcr:93},
    {keybcr:"Cinco",     valuebcr:43},
    {keybcr:"Seis",      valuebcr:20},
    {keybcr:"Siete",     valuebcr:10},
    {keybcr:"Ocho",      valuebcr:30},
    {keybcr:"Nueve",     valuebcr:8},
    {keybcr:"Diez",      valuebcr:21}
  ]; 


  var margin = {
    top: 10, 
    right: 10, 
    bottom: 10, 
    left: 10
  },

    width = parseInt( d3.select("#chart").style('width'), 10),
    width = width - margin.left - margin.right,
    //ratio doesn't always have to be perfect, just about the ratio between the height and width--so that it won't resize based on a height larger than the container
    ratio = .3,
    height = width * ratio;  


    var linearColorScalebcr = d3.scaleLinear()
            .domain([0, dataset2.length])
            .range(["#ffa500", "#008080"]);


function resize() {


    //remove previous chart

    d3.select('svg').remove();

    //reset width/height
    width = parseInt(d3.select("#chart").style('width'), 10),
    width = width - margin.left - margin.right,
    ratio = .3,
    height = width * ratio;
    

  //scales & axes
  var xScale = d3.scaleBand()
    .domain(dataset2.map(function(entry){
      return entry.keybcr;
      })
    )  
    .range([30,width-30]);

  var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset2, function (d){
      return d.valuebcr;
      })
    ])  
    .range([height-30,30 ]); 


    //reset svg
     var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height",height);


    //reset chart
    svg.selectAll("rect")
    .data(dataset2)
    .enter()
      .attrs({
           x: function(d,i){ return xScale(d.keybcr); },
           y: function(d){ return yScale(d.valuebcr); },
           width: function (d){ return xScale.step()-5; },
           height: height,
           fill: function(d,i){ return linearColorScalebcr (i); }
        });



    };



  //scales & axes

  var xScale = d3.scaleBand()
    .domain(dataset2.map(function(entry){
      return entry.keybcr;
    }))  
    .range([30,width-30]);

  var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset2, function (d){
      return d.valuebcr;
    })])  
    .range([height-30,30 ]); 

    

  var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height",height)
    .style("background-color", 'orange');


  
  svg.selectAll("rect")
    .data(dataset2)
    .enter()
    .append("rect")
        .attrs({
           x: function(d,i){ return xScale(d.keybcr); },
           y: function(d){ return yScale(d.valuebcr); },
           width: function (d){ return xScale.step()-5; },
           height: height,
           fill: function(d,i){ return linearColorScalebcr (i); }
        });


    //resize
    d3.select(window).on('resize', resize); 

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
<div id="chart"></div>

＆＃13;

＆＃13;

＆＃13;