d3에서 막대 그래프의 축과 직사각형 틱의 정렬이 잘못되었습니다.

Question

막대 그래프를 그릴 때 d3 js를 사용하고 있습니다. x 축과 y 축도 있습니다. x 축에는 '이름'이 있고 y 축에는 '표시'가 있습니다. 나는 x 축에 서수 척도를 사용하고있다.

내 json 입력 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의 = 데이터는 내 데이터베이스

[{"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

난 당신이 필요했다하지만 내가보기 엔 막대 차트 rangeRoundBands을 사용하는 것이 좋습니다 말했다 문제를 재현 할 수에서 검색 할 수 있습니다.

다음과 같은 설정으로 막대 차트 얻을 수 있습니다

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") 

을 그리고 축과 RECT 렌더링을 위해 다음

// 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