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 \t frequency\n" + 
 
    "django \t 12\n" + 
 
    "dictionary \t 33\n" + 
 
    "C \t 55\n" + 
 
    "D \t 100\n" + 
 
    "E \t 90\n" + 
 
    "F \t 300\n" + 
 
    "G \t 80\n" + 
 
    "H \t 10\n" + 
 
    "I \t 0\n" + 
 
    "J \t 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。但这只是一个猜测，你可能想展示给你带来麻烦的实际代码。