Question

我根据自己的需要修改了很好的AlainRo Block（遗憾的是无法链接到它，因为声誉不够），输入新数据后我无法删除旧的数据图表。 There is my codepen。在另一个example中，我添加了merge（），并且图表已经很好地对齐，但旧的图表仍然可见，并且错过了文本值。

我花了很多时间在上面，而且我没有想法。

有代码

barData = [
    { index: _.uniqueId(), value: _.random(1, 20) },
    { index: _.uniqueId(), value: _.random(1, 20) },
    { index: _.uniqueId(), value: _.random(1, 20) }
];

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)
            .enter()
            .append('g')
                .attr('class', 'brush')
            .append('g')
                .call(brush)
                .call(brush.move, function (d){return [d.value, 0].map(scale);});

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

    svgbrush
        .exit()
            .append('g')
                .attr('class', 'brush')
        .remove();

    function brushmove() { 
        if (!d3.event.sourceEvent) return; // Only transition after input.
        if (!d3.event.selection) return; // Ignore empty selections.
        if (d3.event.sourceEvent.type === "brush") return;

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

        d.datum().value = d0[0]; // Change the value of the original data
        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

您需要两次附加g个元素。这样：

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.enter()
    .append('g')
    .attr('class', 'brush')
    .merge(svgbrush)
    .call(brush)
    .call(brush.move, function (d){return [d.value, 0].map(scale);});

这是您更新的笔：http://codepen.io/anon/pen/VmavyX

PS：我还做了其他更改，声明了一些新变量，只是为了整理输入和更新选择以及解决文本问题。

更新后，d3js v4无法删除旧数据图表

1 个答案: