d3 js双方向水平棒グラフ

Question

d3を使用して水平双方向棒グラフをプロットしようとしています。私はフィドルからサンプルを持っています。私は必要に応じてそれを更新しました。しかし、私はいくつかの問題に終わる。

ここでバイオリンを見つけてください：https://jsfiddle.net/binuabraham/9c3rsrk6/1/

私はそれが6からダニ必要がある - 私のグラフであり30すべての時間を。しかし、値を変更すると、x軸が壊れます。

var xAxis = d3.svg.axis() 
    .scale(x) 
    .tickValues(d3.range(6, 31, 2)); 

また、値ごとに変化するティックの間隔も変化します。誰もそれで私を助けることができますか？

Answer 1

問題あなたはまず30

に6から

var x = d3.scale.linear() 
     .domain([6, 30]) 

としてのxドメインを設定し、後であなたがデータ

x.domain(d3.extent(data, function (d) { 
       return d.value; 
      })).nice(); 

ので、修正に応じて、このようにドメインを設定しています上記のうちの1つは一度行います。

そしてダニがあなたのデータは26

作業コードhere

EDIT

までの最大を持っているので、あなたは常にドメインをしたい場合は、目盛り値31を設定することはできません.tickValues(d3.range(6, 31, 2)); 値削除6〜30になるように追加します。

var x = d3.scale.linear() 
      .domain([6, 30]) 

と下の行を削除：どのように値を変更しない

x.domain(d3.extent(data, function (d) { 
       return d.value; 
      })).nice(); 

作業コードhere