d3js棒グラフ逆さまと滑りブラシ

Question

この単純な棒グラフhttp://codepen.io/ksh/pen/BQEGRKを見て、赤い点線の領域をドラッグして上または下にスライドさせると、ブラシの動きが元に戻ります。正しくするために何をすべきですか？ 私が持っている2番目の質問は、どのように私の破線の領域を常に見えるようにし、同じ要素を再びドラッグすることができるかです。デフォルトでは、バーの高さがゼロのときに消滅し、バーをより高いスケールの位置にスライドすることはできません。

var margin = {top: 20, right: 20, bottom: 50, left: 70}, 
    width = 400 - margin.left - margin.right, 
    height = 400 - margin.top - margin.bottom, 
    delim = 4; 

var scale = d3.scaleLinear() 
    .domain([0, 21]) 
    .rangeRound([height, 0]); 

var x = d3.scaleLinear() 
    .domain([0, barData.length]) 
    .rangeRound([0, width]); 

var y = d3.scaleLinear() 
    .domain([0, 21]) 
    .rangeRound([height, 0]); 

var svg = d3.select('#chart') 
    .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append('g') 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("g") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 

svg.append("g") 
    .call(d3.axisLeft(y)); 

function draw() { 
    x.domain([0, barData.length]); 

var brush = d3.brushY() 
    .extent(function (d, i) { 
     return [[x(i)+ delim/2, 0], 
       [x(i) + x(1) - delim/2, height]];}) 
    .on("brush", brushmove); 

var svgbrush = svg.selectAll('.brush').data(barData); 

svgbrush.enter() 
    .append('g') 
     .attr('class', 'brush') 
    .merge(svgbrush) 
    .append('g') 
     .call(brush) 
     .call(brush.move, function (d){return [d.value, 0].map(scale);}); 

svgbrush.exit().remove(); 

svgbrush 
    .append('text') 
     .attr('y', function (d){return scale(d.value) + 25;}) 
     .attr('x', function (d, i){return x(i) + x(0.5);}) 
     .attr('dx', '-.60em') 
     .attr('dy', -5) 
     .style('fill', 'white') 
     .text(function (d) {return d3.format('.2')(d.value);}) 

function brushmove() { 

    var d0 = d3.event.selection.map(scale.invert); 
    var d = d3.select(this).select('.selection');; 
    var d1 =[d0[0], 0]; 

    if (!d3.event.sourceEvent) return; 
    if (!d3.event.selection) return; 
    if (d3.event.sourceEvent.type === "brush") return; 

    d.datum().value = d0[0]; 
    d3.select(this).call(d3.event.target.move, d1.map(scale)); 

    svgbrush 
     .selectAll('text') 
      .attr('y', function (d){return scale(d.value) + 25;}) 
      .text(function (d) {return d3.format('.2')(d.value);}); 
} 
draw(); 

function upadateChartData() { 
    var newBarsToAdd = document.getElementById('charBarsCount').value; 
    var newBarData = function() { 
     return { index: _.uniqueId(), value: _.random(1, 20) } 
    }; 

    newBarData = _.times(newBarsToAdd, newBarData); 
    barData = _.concat(barData, newBarData) 

    draw(); 
}; 

Answer 1

あなたが逆さまにそれを回すためにSVGを変換するのであなたは奇妙なブラシの挙動を得ている：

transform: rotate(180deg); 

あなたが本当にあなたのチャートとラベルが逆さまになりたいですか？いずれにしても、変換を削除し、変換されていない領域で作業し、必要な場所で軸と棒を移動する方が簡単になると思います。

選択を[0] < = selection [1]にして、反転を呼び出すときに例外が発生しないようにする必要があります。選択が空の場合、[0,0] d3は自動的に選択とハンドルを非表示にします。それはハンドルの位置を選択から外すので、私はあなたがそれを目に見えるように自分で描く必要があると思います。ブラシモーブのようなもの：

if (!d3.event.selection) { 
     var index = parseInt(d.datum().index) - 1; 
     d3.select(this).selectAll('.handle') 
     .style("display","inline") 
     .attr("x", x(index)) 
     .attr("y", scale(0)) 
     .attr("width", x(index+1) - x(index)) 
     .attr("height", delim); 
     return; 
} 

また、選択が空にならないようにすることもできます。