我正在尝试进入,更新并退出以处理我的绘图功能。输入和更新工作虽然我在尝试让出口正常工作时遇到问题。
以下是代码:
var draw = function () {
var drawData = function (dat, className, baseFill, area) {
//var selection (supermarket)
var supermarket, supermarketEnter;
supermarket = svg.selectAll('.' + className)
.data(dat,
function (c) {
return c.Vendor;
});
//var new selection (supermarketEnter)
supermarketEnter = supermarket.enter()
.append('g')
.attr('class', className)
.attr('data-vendor', function (d) { return d.Vendor; })
.attr('width', width)
.attr('height', height);
supermarketEnter.append('path');
//update new selection
supermarketEnter
.attr('clip-path', 'url(#clipper)')
.attr('class', 'line')
.attr('id', function (d) { return d.Vendor; });
supermarket.select('path')
.transition()
.attr('class', 'lines-data')
.attr('fill', 'none')
.duration(500)
.attr('d',
function (d) {
return line(d.Values);
});
var path = supermarket.select('path')
.style('stroke', function (d, i) {
return (d.Visible ? baseFill(d.Index) : grayFill);
});
if (area) {
path.style('fill', function (d, i) { return (d.Visible ? baseFill(d.Index) : grayFill); });
}
supermarketEnter
.selectAll("circle")
.data(function (d) {
return d.Values;
})
.enter()
.append('circle')
.attr('class', 'datapoint')
.attr('r', 4)
.style('fill',
function (d, i, j) {
return dat[j].Visible ? baseFill(j) : grayFill;
})
.attr('transform',
function (d) {
return 'translate(' + x(d.Month) + ',' + y(d.Value) + ')';
})
.on('mouseover',
function (d, i, j) {
d3.select('.tooltip')
.style('opacity', '1');
d3.select('.tooltip')
.html(dat[j].Vendor + '<br/> (' + moment(d.Month).format("MMM YYYY") + ', ' + d.Value.toPrecision(2) + '% )')
.style('left', function () {
var newWidth = d3.event.pageX - ($(chartEl).width() / 10) + 'px';
if (window.innerWidth >= 1200) {
var newWidth = d3.event.pageX - ($(chartEl).width() / 2) + 'px';
}
return newWidth;
})
.style('top', (d3.event.pageY) - 300 + 'px');
})
.on("mouseout",
function (d) {
d3.select('.tooltip')
.style('transition', '500')
.style('opacity', 0)
.style('color', d3.select(this).style('fill'));
});
supermarket.exit().remove();
supermarket.order();
return zoomBeh.x(x);
}
svg.selectAll('.x.axis').call(xAxis);
svg.selectAll('.y.axis').call(yAxis);
drawData(chartData, 'supermarket', patterns, false);
};
答案 0 :(得分:2)
您的“退出”选择基于此块,该块绑定数据:
supermarket = svg.selectAll('.' + className)
.data(dat, function(c){
return c.Vendor;
});
注意这一部分:selectAll('.' + className)
。在这里,我们选择名为.className
的类的所有元素(无论字符串className
是什么)并将数据绑定到它们。
继续:最初,您的“输入”选择正确设置了类:
supermarketEnter = supermarket.enter()
.append('g')
.attr('class', className)
但是,接下来几行,你这样做:
supermarketEnter
.attr('class', 'line')
并覆盖.className
类。
因此,您的退出选择始终为空,因为不再有名为className
的类。
<强>演示:强>
使用正确的选择检查此第一个代码段。你可以看到“输入”和“退出”选择都有效:
var svg = d3.select("svg");
setInterval(function(){
var data = d3.range(Math.random()*20);
draw(data);
}, 1000);
function draw(data){
var circles = svg.selectAll(".someClass")
.data(data);
var circlesEnter = circles.enter().append("circle")
.attr("class", "someClass")
.attr("cx", (d,i)=> 10 + i*15)
.attr("cy", 50)
.attr("r", 5)
.attr("fill", "teal");
var circlesUpdate = circles.attr("cx", (d,i)=> 10 + i*15);
var circlesExit = circles.exit().remove();
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
现在,相同的代码,但覆盖了初始类:
circlesEnter.attr("class", "foo");
您可以看到“退出”选择不再有效。这是一个破碎的代码:
var svg = d3.select("svg");
setInterval(function(){
var data = d3.range(Math.random()*20);
draw(data);
}, 1000);
function draw(data){
var circles = svg.selectAll(".someClass")
.data(data);
var circlesEnter = circles.enter().append("circle")
.attr("class", "someClass")
.attr("cx", (d,i)=> 10 + i*15)
.attr("cy", 50)
.attr("r", 5)
.attr("fill", "teal");
circlesEnter.attr("class", "foo");
var circlesUpdate = circles.attr("cx", (d,i)=> 10 + i*15);
var circlesExit = circles.exit().remove();
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>