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

我在绘制值时遇到了一个问题。这些条超出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

var margin1={top:40，right:20，bottom:30，left:40}，
宽度1=460/-margin.left-margin.right，
高度1=200/-margin.top-margin.bottom；
var formatPercent1=d3.format（“”）；
var x1=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度1]，0）；
//.rangeRoundBands（[width1,0]；
变量y1=d3.scale.linear（）
.范围（[高度1,0]）；
var xAxis1=d3.svg.axis（）
.刻度（x1）
.东方（“底部”）；
var yAxis1=d3.svg.axis（）
.比例（y1）
.东方（“左”）
.1格式（formatPercent1）；
var tip1=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“频率：”+d.Frequency+”；
})
var svg1=d3.选择（#Bar1”）.追加（“svg”）
.attr（“宽度”，宽度1+margin1.left+margin1.right）
.attr（“高度”，高度1+margin1.top+margin1.bottom）
.附加（“g”）
.attr（“transform”、“translate”（+margin1.left+）、“+margin1.top+”）；
svg1.call（tip1）；
d3.tsv（数据、类型、功能（错误、数据1）{
域（data1.map（函数（d）{返回d.letter；}））；
y1.域（[0，d3.max（data1，函数（d）{返回d.frequency；}）]）；
svg1.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度1+”）
.call（xAxis1）；
svg1.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis1）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
svg1.选择全部（“.bar”）
.数据（数据1）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x（d字母）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.frequency）；}）
.attr（“高度”，函数（d）{返回高度1-y（d.frequency）；}）
.on（'mouseover'，tip1.show）
.on（'mouseout'，tip1.hide）
});
功能类型（d）{
d、 频率=+d.频率；
返回d；
}
CSV：
字母频率
django 12
词典33
C 55
D 100
E 90
F 300
G80
H10
I 0
J 0

有人能帮我解决这个问题吗？我不明白为什么这是一个问题。 X轴和Y轴也是按比例缩放的。我有没有遗漏什么

谢谢，

---

Sriram

除了您发送的代码之外，您肯定在其他地方有错误。我刚刚将其放入JSFIDLE，它可以正常工作：

var tsv=“字母频率\n”+
“django 12\n”+
“字典33\n”+
“C 55\n”+
“D 100\n”+
“E 90\n”+
“F 300\n”+
“G80\n”+
“H10\n”+
“I 0\n”+
“J 0”；
var margin1={top:40，right:20，bottom:30，left:40}，
宽度1=460/-margin.left-margin.right，
高度1=200/-margin.top-margin.bottom；
var formatPercent1=d3.format（“”）；
var x1=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度1]，0）；
//.rangeRoundBands（[width1,0]；
变量y1=d3.scale.linear（）
.范围（[高度1,0]）；
var xAxis1=d3.svg.axis（）
.刻度（x1）
.东方（“底部”）；
var yAxis1=d3.svg.axis（）
.比例（y1）
.东方（“左”）
.1格式（formatPercent1）；
var svg1=d3.选择（#Bar1”）.追加（“svg”）
.attr（“宽度”，宽度1+margin1.left+margin1.right）
.attr（“高度”，高度1+margin1.top+margin1.bottom）
.附加（“g”）
.attr（“transform”、“translate”（+margin1.left+）、“+margin1.top+”）；
var data1=d3.tsv.parse（tsv，类型）
域（data1.map（函数（d）{返回d.letter；}））；
y1.域（[0，d3.max（data1，函数（d）{返回d.frequency；}）]）；
svg1.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度1+”）
.call（xAxis1）；
svg1.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis1）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“频率”）；
svg1.选择全部（“.bar”）
.数据（数据1）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x1（d字母）；}）
.attr（“宽度”，x1.rangeBand（））
.attr（“y”，函数（d）{返回y1（d.frequency）；}）
.attr（“高度”，函数（d）{返回高度1-y1（d.频率）；}）
功能类型（d）{
d、 频率=+d.频率；
返回d；
}

Hi Veprosa，谢谢你的回复。我复制粘贴了你的代码，它看起来确实有效。你能告诉我你做了哪些更改吗。除了将CSV内容放入变量“tsv”中之外。之前矩形之间也有间隙。你能告诉我你是否对那篇文章做了更改吗。嗨，我编辑了更改，但你总结了它-我更改为

d3.tsv.parse

内联解析，我还修复了

x

和

x1

混淆，并删除了

d3.tip

，以清晰起见。至于间隙，我不同意请勿触摸代码的该部分。如果需要间隙，可能需要将

.attr（“width”，x1.rangeBand（））

更改为类似

.attr（“width”，x1.rangeBand（）-1）

或您希望的间隙大小。