- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试进入、更新和退出以处理我的绘图功能。进入和更新工作,尽管我在尝试让退出正常工作时遇到问题。
代码如下:
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);
};
最佳答案
您的“退出”选择基于此 block ,它绑定(bind)了数据:
supermarket = svg.selectAll('.' + className)
.data(dat, function(c){
return c.Vendor;
});
注意这部分:selectAll('.' + className)
。在这里,我们选择具有名为 .className
的类的所有元素(无论 className
是什么字符串)并将数据绑定(bind)到它们。
继续:最初,您的“输入”选择正确设置了类别:
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>
关于javascript - 退出选择不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40789017/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!