Question

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

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

barchart

从代码和此图片中可以看出，条形图不得超过500px的宽度和橙色的颜色...... 但尝试插入5到9之间或大于100的值，你会看到。让我们改变“9”中的“11”：

screwed up

宽度和色标完全搞砸了！

这是代码：

<!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>

Answer 1

你看到这个是因为你的数字实际上不是数字，而是字符串。特别是，“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()功能可能会在您的设置中实现，也可能不会在您的设置中实现，有关详细信息和可以使用的实现，请参阅here。

在d3.js中显示数组列表的奇怪行为

1 个答案: