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軸也會縮放。 有什么我錯過的東西嗎？

謝謝，Sriram

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 。 但這只是一個猜測，您可能想要顯示給您帶來麻煩的實際代碼。