d3 v4錯誤：「意外的值解析寬度屬性。」在分組條形圖

Question

我想創建一個d3（版本4）分組條形圖與我自己的數據，基於Mike Bostock's great example。我不得不改變所有的D3 V3過時的功能，新的V4的人（如d3.scale.ordinal - >d3.scaleOrdinal），但後來我有關的「寬度」和「X」的矩形條屬性錯誤：

• 「意外值0,0,900解析寬度屬性。'
• '意外值0,900解析x屬性'。

這裏是代碼的相關部分：

var x0 = d3.scaleBand() 
     .range([0, width]) 
     .round(true); 

var x1 = d3.scaleOrdinal(); 

var y = d3.scaleLinear() 
     .range([height, 0]); 

var xAxis = d3.axisBottom() 
     .scale(x0); 

var yAxis = d3.axisLeft() 
     .scale(y); 

var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("myData.csv", function(error, data) { 
     if (error) throw error; 

     var yearNames = d3.keys(data[0]).filter(function(key) { return key !== "Unit"; }); 

     data.forEach(function(d) { 
     d.years = yearNames.map(function(name) { return {name: name, value: +d[name]}; }); 

     }); 


x0.domain(data.map(function(d) { return d.Unit; })); 
x1.domain(yearNames).range([0, x0.range()]); 
y.domain([0, d3.max(data, function(d) { return d3.max(d.years, function(d) { return d.value; }); })]); 

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

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("Population"); 

var unit = svg.selectAll(".unit") 
      .data(data) 
     .enter().append("g") 
      .attr("class", "unit") 
      .attr("transform", function(d) { return "translate(" + x0(d.Unit) + ",0)"; }); 

unit.selectAll("rect") 
     .data(function(d) { return d.years; }) 
     .enter().append("rect") 
      .attr("width", x1.range()) 
      .attr("x", function(d) { return x1(d.name); }) 
      .attr("y", function(d) { return y(d.value); }) 
      .attr("height", function(d) { return height - y(d.value); }) 
      .style("fill", function(d) { return color(d.name); }); 

    }); 

，這裏是CSV數據：

Unit,2012,2013 
Comp,54.13809524,52.25 
Edu,20.39642857,18.75 
Bus,16.3,18.5 
SoW,16.08,7 
Pharm,45,59 
Agr,150.3,122.51 
Soc,105.2,112.72 
Nat,264.86,277.73 
Hum,61.73174603,52.91 
Law,14.5,22.33 
Dent,27.5,11.5 
Med,149.1,147.33 
Vet,15,19 
Jew,1,0.25 
Bra,2.5,4 

Answer 1

你的大多數問題都來自於中.range()不正確的用法。例如這裏：

x1.domain(yearNames).range([0, x0.range()]); 

這裏：

.attr("width", x1.range()) 

.range返回一個數組，這是不是你想要的。

此外，你可能不希望x1是scaleOrdinal而是scaleBand。我設置它是這樣的：

x0.domain(data.map(function(d) { 
    return d.Unit; 
    })); 

    // set a sane bar width 
    var barWidth = x0.bandwidth()/yearNames.length, 
     barPadding = barWidth * 0.3; 

    // set up x1 as a scaleBand with padding 
    x1.domain(yearNames).range([barPadding , x0.bandwidth() - barPadding]); 
    y.domain([0, d3.max(data, function(d) { 
    return d3.max(d.years, function(d) { 
     return d.value; 
    }); 
    })]); 

Running code here.