我的 d3.js 秤不工作答案

【问题标题】：My d3.js Scales are not working我的 d3.js 秤不工作
【发布时间】：2017-08-08 01:22:33
【问题描述】：

我是 d3.js 的新手，目前正在制作第 4 版的简单条形图。我了解刻度的基本概念。问题是每当我重新加载我的页面时，我的条形图上的一些条被切成两半，或者一直移动到顶部（或底部），这是我的代码。我希望我的酒吧保持在 svg 内，但如果我要放例如

.attr(height, function(d){ return yScale(d)]);

它不会工作。有任何想法吗？我的代码应该位于底部。

var data = [ 40,60,80,100,600,700];
var height = 500, width = 500;  


var canvas  = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height",height);


var yScale = d3.scaleLinear()
           .domain([40, 700])
           .range([0,400]);


var bars = canvas.selectAll("rect")
             .data(data)
             .enter()
             .append("rect")
                .attr("width", 30)
                .attr("height", function(d){ return   yScale(d)})

                .attr("x", function(d,i){ return i * 35})
                .attr("y", function(d) { return height - d});



}

图像的输出在这里。

【问题讨论】：

您提供的代码有语法错误。您的意思是 } 而不是 ]？

标签： javascript d3.js svg scale

【解决方案1】：

这里的问题是这一行：

.attr("y", function(d) {
    return height - d
});

为什么要使用原始数据值？您必须使用比例返回的值：

.attr("y", function(d) {
    return height - yScale(d)
});

这是更新后的代码：

var data = [40, 60, 80, 100, 600, 700];
var height = 500,
  width = 500;

var canvas = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var yScale = d3.scaleLinear()
  .domain([40, 700])
  .range([0, 400]);

var bars = canvas.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", 30)
  .attr("height", function(d) {
    return yScale(d)
  })
  .attr("x", function(d, i) {
    return i * 35
  })
  .attr("y", function(d) {
    return height - yScale(d)
  });

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

【讨论】：