d3の棒グラフの軸と矩形の目盛りのずれ。

Question

私は棒グラフを描くのにd3 jsを使用しています。私はx軸とy軸も持っています。 x軸は '名前'を保持し、y軸は 'マーク'を保持します。私はx軸に序数尺度を使用しています。

json input dataset_rule_errorsには、10個のエントリがあります。 私のコードは、私が直面しています問題は、私の長方形とx軸の目盛りが互いに整列しないということです

var svgd = d3.select("body") 
          .append("svg") 
          .attr("width", width) 
          .attr("height", height); 
var x_domain = dataset_rule_errors.map(function(d) { return d.Rulename; }) 

var xScale = d3.scale.ordinal()   
        .domain(dataset_rule_errors.map(function (d) { return d.Rulename; })) 
        .rangeBands([padding_rule, wsvg]); 

var xaxeScale = d3.scale.ordinal() 
        .domain(x_domain) 
        .rangePoints([padding_rule, wsvg]); 

var xAxis = d3.svg.axis() 
         .scale(xaxeScale) 
         .tickValues(x_domain) 
         .orient("bottom"); 
//drawing rectangles 
svgd.append("g") 
     .selectAll("rect")         //based on the data in the dataset[] array, append rectangles s.t. 
     .data(dataset_rule_errors)          // 
     .enter() 
     .append("rect") 
     .attr("x", function (d, i) { 
      return xScale(d.Rulename);        // x position of rect as per i->0,1,2,3,... 
     }) 
     .attr("y", function (d) { 
      return (h_rule - yScale(d.NumRuleFailed));       //y position of rect as per (h-value) to prevent inverted range 
     }) 
     .attr("width", xScale.rangeBand())//"10")    //depending upon domain->no of inputs - with of band is decided acc. to fit in svg 
     .attr("height", function (d) { 
      return yScale(d.NumRuleFailed);       //depending upon domain->value of inputs - with of band is decided acc. to fit in svg 
     }) 
     .attr("fill", function (d, i) {      //colour based on values -> more errors - dark coloured bars 
      if(i%2==0) 
       return "rgb(" + 255 + "," + 255 + "," + 200 + ")"; 
      else 
       return "rgb(" + 0 + "," + 0 + "," + 200 + ")"; 
     }) 
     .attr("stroke", "black"); 

//drawing x axis with ticks 
svgd.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(" + 0 + "," + (h_rule) + ")")  
     .call(xAxis) 
     .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", ".15em") 
     .attr("text-anchor", "start") 
     .attr("transform", function (d) { 
      return "rotate(-90)" 
     }) 
     .selectAll(".tick text") 
     .style("text-anchor", "start"); 

です。

私は10本の棒があるため、最初と最後のものを含めて11刻みでなければなりません。しかし、私は軸の長さに沿って均等に分布するわずか10ティックしか持っていないので、この質問のように長方形の始まりと一致しません。Unable to align ticks with d3.js

しかし、この質問の解決策はうまくいかなかった。私に何ができる？ =データ

dataset_rule_errorsは、私はあなたが持ったが、私は非常に棒グラフのためrangeRoundBandsを使用することをお勧めと述べ、問題を再現することができませんでした私のデータベース

[{"Rulename":"A","NumRuleFailed":34321},{"Rulename":"B","NumRuleFailed":43},{"Rulename":"C","NumRuleFailed":45522}, 
{"Rulename":"D","NumRuleFailed":43643},{"Rulename":"E","NumRuleFailed":152},{"Rulename":"F","NumRuleFailed":152}] 

Answer 1

から取り出します。

あなたは次のセットアップで棒グラフを達成することができます

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], .2); 

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

// Finding domain of x (all our rulenames) 
x.domain(data.map(function(d) { 
    return d.Rulename; 
})); 

// Finding domain of y (min and max values) 
y.domain([d3.min(data, function(d) { 
    return d.NumRuleFailed; 
}), d3.max(data, function(d) { 
    return d.NumRuleFailed; 
})]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    // no need yo specify ticks, x scale 
    // will take care of that 
    .orient("bottom"); 

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

そして軸と矩形の描画に次

// Render xAxis 
svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", "-.50em") 
    .attr("text-anchor", "start") 
    .attr("transform", "rotate(-90)") 
    .selectAll(".tick text") 
    .style("text-anchor", "start") 
// Render yAxis 
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("NumRuleFailed"); 
// Render rects 
svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { 
    return x(d.Rulename); 
    }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { 
    return y(d.NumRuleFailed); 
    }) 
    .attr("fill", function(d, i) { //colour based on values -> more errors - dark coloured bars 
    return (i % 2) ? 'green' : 'red'; 
    }) 
    .attr("height", function(d) { 
    return height - y(d.NumRuleFailed); 
    }); 

全Plnkr：https://plnkr.co/edit/jmtMGcRyT9hM5efwwTOb?p=preview