d3 v4エラー：「予期しない値解析の幅属性」。グループ化された棒グラフで

Question

Mike Bostock's great exampleに基づいて、私自身のデータでd3（バージョン4）のグループ化棒グラフを作成しようとしています。 「予期しない

• ：その後私は「幅」と矩形バーの「X」の属性に関連するエラーを得た - 私は新しいv4のものに（>d3.scaleOrdinal例えばd3.scale.ordinalを）すべてのD3 v3の時代遅れの機能を変更しなければなりませんでした値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.