Javascript d3js倒置条形图和滑动画笔

如果你看一下这个简单的条形图，当你把红色虚线区域拖到顶部或底部时，你会看到恢复的笔刷移动。我该怎么做才能把它做好？ 第二个问题是，如何使虚线区域始终可见，并且可以再次拖动相同的元素。默认情况下，当条形高度为零时，它们将消失，并且不可能将条形滑动到更高比例的位置

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();
};

---

您得到了奇怪的笔刷行为，因为您将svg转换为将其倒置：

transform: rotate(180deg);

你真的希望你的图表和标签颠倒吗？不管是哪种方式，我认为移除转换，在未转换的空间中工作，并将轴和杆移动到您想要的位置会更容易

---

您应该确保选择[0]我需要旋转功能，在这个简单的示例中，我以最简单的方式添加了旋转。我不在乎标签，整个图表应该是旋转的。多亏了你，我发现了如何检查选择值

d3.event.selection

在v4中是

d3.brushSelection（节点）。

我正在比较两个值，如果它们相同，原始

。handle

元素将接收

显示：无

和定义位置、大小的所有其他属性将被删除。我想阻止它。

让eventSelection=d3.brushSelection（this）；如果（（Math.round（eventSelection[0]*10）/10）！=（Math.round（eventSelection[1]*10）/10）{d3.select（this）.selectAll（'.handle'）.style（'display'，'inline'）.attr（'x'，'…'））}

我定义的所有属性都没有应用，只有显示的样式才起作用。我的目标是将bahaviour作为，但不幸的是，它是使用D3V3编写的，我希望它在D3V4中

    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;
}