d3中条形图的轴和矩形的刻度未对齐

Question

我正在使用 d3 js 绘制条形图。我也有 x 和 y 轴。 x 轴将保存“名称”，y 轴将保存“标记”。我正在使用 x 轴的序数比例。

在我的 json 输入 dataset_rule_errors 中，我有 10 个条目。 我的代码是

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

我面临的问题是我的矩形和 x 轴的刻度不相互对齐。

原因是因为我有 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")

轴和矩形渲染如下：

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