在这个简单的例子中:http://jsfiddle.net/2VeGY/1/
<!doctype html>
<meta charset="utf-8">
<title>single column</title>
<style>
*{margin:0,padding:0}
input{width:800px;}
nav{border:1px solid gray; width:850px;}
li{display:inline-block; height:30px; }
li:hover{opacity:0.8}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<input value="[{"v":0,"c":"red"},{"v":100,"c":"#005"},{"v":200,"c":"#12d"}, {"v&quo\
t;:300,"c":"#1dd"}, {"v":400,"c":"red"} ]">
<nav>
<ul>
</ul>
</nav>
<script>
var wscale = d3.scale.linear().range(["0px","800px"])
update()
d3.select("input").on("change",update)
function update(){
var data = JSON.parse(d3.select("input").property("value"));
var li=d3.select("ul").selectAll("li").data(data);
wscale.domain(d3.extent(data,function(d){return d.v}))
li.enter().append("li")
li
.style("width",function(d,i){
start=d.v
i+1 == data.length ? end=d.v : end=data[i+1].v;
return wscale(end-start)
})
.style("background-image",function(d,i){
start=d.c;
i+1 == data.length ? end=d.c : end=data[i+1].c;
return "linear-gradient(to right, "+start+","+end+")"});
li.exit().remove()
}
</script>
您可以更改步骤 data[...].c 的色标及其位置 data[...].v。
比例是动态更新的。
我的问题如下:如果第一个值不为零，为什么会出错？
非常感谢您的帮助!
最佳答案
您看到此行为是因为在您当前的代码中，您总是将 0 作为输入值传递给 wscale。对于最后一个 li 元素，end 将与函数中的 start 相同以设置 width因此，您传递给 wscale 的内容将为 0。wscale 的输入域被确定为输入值的范围，并且不会将此附加值带入帐户。
您可以通过更改域的确定方式轻松解决此问题:
wscale.domain([0, d3.max(data,function(d){return d.v})]);
这假设您所有的 v 值都是正数。
但是，您真正想要做的是考虑值之间的差异，因为这就是您传递给秤的内容。也就是说，差异的总和应该等于最大宽度。您可以按如下方式计算。
var sumdiff = 0;
for(var i = 0; i < data.length - 1; i++) {
sumdiff += data[i+1].v - data[i].v;
}
那么尺度就变成了
wscale.domain([0, sumdiff]);
完整示例 here .
关于css - 如果第一个值不为零，则 D3 比例失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19989101/