0

この簡単な例では: 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="[{&quot;v&quot;:0,&quot;c&quot;:&quot;red&quot;},{&quot;v&quot;:100,&quot;c&quot;:&quot;#005&quot;},{&quot;v&quot;:200,&quot;c&quot;:&quot;#12d&quot;}, {&quot;v&quo\
t;:300,&quot;c&quot;:&quot;#1dd&quot;}, {&quot;v&quot;:400,&quot;c&quot;:&quot;red&quot;} ]">
  <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。スケールは動的に更新されます。

私の問題は次のとおりです。最初の値がゼロ以外の場合、なぜ混乱するのですか?

助けてくれてどうもありがとう!

4

2 に答える 2

0

範囲内に引用符を入れないでください。次のようにする必要があります。

.range([0,800])
于 2013-11-14T22:15:41.340 に答える