Question

我正在使用d3 js绘制条形图。我也有x和y轴。 x轴将保持＆＃39;名称＆＃39;和y轴标记＆＃39;。我正在使用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);
  });

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

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

1 个答案: