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」は 1 文字の長さですが、他のすべての「数字」は 2 文字の長さです (「100」も同様です)。

解決策は、文字列を整数に変換することです。map()これを行う 1 つの方法は、次のように関数を使用することです。交換

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 に答える