0

有人知道为什么我在输入或更新5 到 9 之间且大于 100 的数组值时在我的 d3 比例尺中有一个完全扭曲的布局？

我在这里设置了示例：http ://bl.ocks.org/vertighel/5149663

条形图

从代码和这张图片中可以看出，条形图的宽度不得超过 500 像素，颜色不得超过橙色……但尝试插入介于 5 和 9 之间或大于 100 的值，您会看到。让我们把“9”中的“11”改一下：

搞砸了

宽度和色阶完全搞砸了！

这是代码：

<!doctype html>
<meta charset="utf8"></meta>
<title>Test</title>
<style type="text/css">
  li{border: 1px solid white; background-color: steelblue; color: white}
  li{width: 50px; text-align:right; }
  li:hover{opacity:0.7;}
  .clicked{background-color: green}
  :invalid{background-color: pink}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<input id="inp" value="1,23,42,20,11,33,21" pattern="(\d+)(,\s*\d+)*" required>
<label for="inp">change me</label>
<h1>click on the bars</h1>

<script>

var list = d3.select("body").append("ul");

update()
d3.select("input").on("change",update)

function update(){
var array = d3.select("input").property("value").split(",")
console.log(array);

var cscale = d3.scale.linear()
.domain(d3.extent(array))
.range(["steelblue","orange"])

var wscale = d3.scale.linear()
.domain(d3.extent(array))
.range(["10px","500px"])

var elem = list.selectAll("li").data(array);

elem.enter()
.append("li")

elem.text(function(d){return d})
.transition()
.style("width", function(d){return wscale(d)})
.style("background-color", function(d){return cscale(d)})

elem.on("click",function(d,i){d3.select("h1").text("list item "+i+" has value "+d)})

elem.exit().remove()

}

</script>
4

1 回答 1

2

您看到这一点是因为您的数字实际上不是数字，而是字符串。特别是，“9”只有一个字符长，而所有其他“数字”都是两个字符长（类似于“100”）。

解决方案是将字符串转换为整数。一种方法是使用map()如下函数。代替

var array = d3.select("input").property("value").split(",")

到

var array = d3.select("input").property("value").split(",")
              .map(function(d) { return(+d); });

该map()功能可能会或可能不会在您的设置中实现，请参阅此处了解更多信息和您可以使用的实现。

于 2013-03-15T09:57:24.723 回答