Странное поведение, отображающее список из массива в d3.js

Кто-то знает, почему у меня есть полностью раздутый макет в моих шкалах d3 при вводе или обновлении значений массива между 5 и 9 и более 100?Странное поведение, отображающее список из массива в d3.js

Я выставиться здесь пример: http://bl.ocks.org/vertighel/5149663

barchart

Как вы можете видеть из кода и в этой картине, гистограмма не должна превышать ширину 500px и цвет апельсина. .. , но попытайтесь вставить значение от 5 до 9 или больше 100, и вы увидите. Давайте изменим "11" в "9":

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>

источник

2013-03-15 leonard vertighel

Вы видите это, потому что ваши номера фактически не число, а строки. В частности, «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 для получения дополнительной информации и реализации можно использовать.

источник

2013-03-15 09:57:24

Спасибо, это решило мою проблему! –

Странное поведение, отображающее список из массива в d3.js

ответ

Смежные вопросы