D3 条形图。值未与 Y 轴对齐

Question

我在绘制值时遇到问题。条形图超出了 Y 轴。

<div id = "Bar1">
        <script>

        var margin1 = {top: 40, right: 20, bottom: 30, left: 40},
            width1 = 460 //- margin.left - margin.right,
            height1 = 200 //- margin.top - margin.bottom;

        var formatPercent1 = d3.format("");

        var x1 = d3.scale.ordinal()
            .rangeRoundBands([0, width1], 0);
            //.rangeRoundBands([width1, 0);

        var y1 = d3.scale.linear()
            .range([height1, 0]);

        var xAxis1 = d3.svg.axis()
            .scale(x1)
            .orient("bottom");

        var yAxis1 = d3.svg.axis()
            .scale(y1)
            .orient("left")
            .tickFormat(formatPercent1);

        var tip1 = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function(d) {
            return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
          })

        var svg1 = d3.select("#Bar1").append("svg")
            .attr("width", width1 + margin1.left + margin1.right)
            .attr("height", height1 + margin1.top + margin1.bottom)
          .append("g")
            .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")");

        svg1.call(tip1);

        d3.tsv(data, type, function(error, data1) {
          x1.domain(data1.map(function(d) { return d.letter; }));
          y1.domain([0, d3.max(data1, function(d) { return d.frequency; })]);

          svg1.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + height1 + ")")
              .call(xAxis1);

          svg1.append("g")
              .attr("class", "y axis")
              .call(yAxis1)
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Frequency");

          svg1.selectAll(".bar")
              .data(data1)
            .enter().append("rect")
              .attr("class", "bar")
              .attr("x", function(d) { return x(d.letter); })
              .attr("width", x.rangeBand())
              .attr("y", function(d) { return y(d.frequency); })
              .attr("height", function(d) { return height1 - y(d.frequency); })
              .on('mouseover', tip1.show)
              .on('mouseout', tip1.hide)

        });

        function type(d) {
          d.frequency = +d.frequency;
          return d;
        }

        </script>
    </div>

The CSV:
letter  frequency
django  12
dictionary  33
C   55
D   100
E   90
F   300
G   80
H   10
I   0
J   0

任何人都可以帮我解决这个代码。我不明白为什么这是一个问题。 X 和 Y 轴也被缩放。有什么我错过的吗？

谢谢，斯里拉姆

Answer 1

除了您发送的验证码之外，您一定有其他地方的错误。我只是把它放到 JSFiddle 上，它工作正常：

var tsv = "letter frequency\n" + 
    "django 12\n" + 
    "dictionary 33\n" + 
    "C 55\n" + 
    "D 100\n" + 
    "E 90\n" + 
    "F 300\n" + 
    "G 80\n" + 
    "H 10\n" + 
    "I 0\n" + 
    "J 0";

var margin1 = {top: 40, right: 20, bottom: 30, left: 40},
    width1 = 460 //- margin.left - margin.right,
    height1 = 200 //- margin.top - margin.bottom;

var formatPercent1 = d3.format("");

var x1 = d3.scale.ordinal()
    .rangeRoundBands([0, width1], 0);
    //.rangeRoundBands([width1, 0);

var y1 = d3.scale.linear()
    .range([height1, 0]);

var xAxis1 = d3.svg.axis()
    .scale(x1)
    .orient("bottom");

var yAxis1 = d3.svg.axis()
    .scale(y1)
    .orient("left")
    .tickFormat(formatPercent1);


var svg1 = d3.select("#Bar1").append("svg")
    .attr("width", width1 + margin1.left + margin1.right)
    .attr("height", height1 + margin1.top + margin1.bottom)
  .append("g")
    .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")");

var data1 = d3.tsv.parse(tsv, type)
x1.domain(data1.map(function(d) { return d.letter; }));
y1.domain([0, d3.max(data1, function(d) { return d.frequency; })]);

svg1.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height1 + ")")
  .call(xAxis1);

svg1.append("g")
  .attr("class", "y axis")
  .call(yAxis1)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Frequency");

svg1.selectAll(".bar")
  .data(data1)
.enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x1(d.letter); })
  .attr("width", x1.rangeBand())
  .attr("y", function(d) { return y1(d.frequency); })
  .attr("height", function(d) { return height1 - y1(d.frequency); })

function type(d) {
  d.frequency = +d.frequency;
  return d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='Bar1'></div>

在您的代码片段中，您将 x 比例称为 x 变量，而实际上您将其保存在 x1 中。 y 和 y1 变量也是如此。这在我的代码片段中得到了纠正。

除此之外，我将 TSV 加载从 d3.tsv 更改为 d3.tsv.parse，但这只是跳过了资源的 AJAX 获取。我还删除了 d3.tip 工具提示，但同样，这不应更改条形图本身。

从你的图片来看，我猜你并没有将 frequency 转换为 Number，而是将其保留为 String。但这只是一个猜测，您可能想要显示给您带来麻烦的实际代码。

D3 条形图。值未与 Y 轴对齐

D3 Bar chart. Values not aligned with Y axis

javascript

bar-chart

d3.js