我的d3.js秤不起作用

Question

我是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});



}

图像输出在这里。

Answer 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) }); 

 <script src="https://d3js.org/d3.v4.min.js"></script>