- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在尝试启动并运行经过修改的蜂群图。它的“特殊”之处在于我试图根据 bool 值拆分 y 值。因此,您可以想象一种双蜂群视觉效果——一个部分在 x 轴上方附加了圆圈,而另一个部分在 x 轴下方附加了圆圈。
我的数据非常简单,但对于上下文这里有一个解释:
所以,如果我们清楚这一点,让我重申一下我的目标。我希望观察在劳动力中的圆圈在 x 轴上方,我希望观察不在劳动力中的圆圈在 x 轴下方。
下面的代码包含来 self 的完整数据集的 150 个样本(硬编码):
var margins = {top:20, bottom:300, left:30, right:100};
var height = 200;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
var formatValue = d3.format(",d");
var xScale = d3.scaleLinear()
.range([0, width]);
/*
var tsvData = d3.tsv('voronoi-circles.tsv');
tsvData.then(function(rawData) {
var data = rawData.map(function(d) {
return {educ:+d.educ, inlf:+d.inlf}
});
*/
var data = [{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 13.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 13.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 11, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 10.0, 'inlf': 1},
{'educ': 16.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 14.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 8.0, 'inlf': 1},
{'educ': 17.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 1},
{'educ': 12.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 10.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 15.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 6.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 15.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 10.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 10, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0},
{'educ': 8.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 13.0, 'inlf': 0},
{'educ': 11.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 17.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 9.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 12.0, 'inlf': 0},
{'educ': 14.0, 'inlf': 0},
{'educ': 16.0, 'inlf': 0}];
xScale.domain(d3.extent(data, function(d) { return d.educ; }));
var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) { return xScale(d.educ); }).strength(1))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(4))
.stop();
for (var i = 0; i < 120; ++i) simulation.tick();
graphGroup.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale).ticks(20, ".0s"));
var cell = graphGroup.append("g")
.attr("class", "cells")
.selectAll("g").data(d3.voronoi()
.extent([[-margins.left, -margins.top], [width + margins.right, height + margins.top]])
.x(function(d) { return d.x; })
.y(function(d) {
if (d.inlf==1) {
return d.y;
} else {
return d.y+300;
}
})
.polygons(data)).enter().append("g");
cell.append("circle")
.attr("r", 3)
.attr("cx", function(d) { return d.data.x; })
.attr("cy", function(d) { return d.data.y; });
cell.append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
/*
cell.append("title")
.text(function(d) { return d.data.id + "\n" + formatValue(d.data.value); });
*/
//})
.cells path {
fill: none;
pointer-events: all;
}
.cells :hover circle {
fill: red;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
如您所见,我尝试了一种相当直接的方法,即使用 if 语句将 +300
添加到 y 值。然而,结果并不像预期的那样,并且似乎将所有值都 chop 为 0。不知道为什么。
如何修改圆坐标逻辑以说明我的 bool 值 (d.inlf
)?还是不是那么简单;也许应该调用另一个单独的 d3.voronoi()
。无论哪种情况,我都不确定如何进行。
最佳答案
我完全不知道你在这里使用 voronoi 的目的是什么,所以我就把它去掉了。
你只需要两件事。首先,确定模拟中的 y
位置:
.force("y", d3.forceY(function(d) {
return d.inlf ? height - 100 : height + 100
}))
然后,设置圆圈的位置:
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
最后,请记住模拟的滴答必须运行多少次的简写,所以这...
for (var i = 0; i < 120; ++i) simulation.tick();
...可以是:
simulation.tick(120);
这是演示:
var margins = {
top: 0,
bottom: 200,
left: 30,
right: 100
};
var height = 150;
var width = 900;
var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate(" + margins.left + "," + margins.top + ")");
var formatValue = d3.format(",d");
var xScale = d3.scaleLinear()
.range([0, width]);
var data = [{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 13.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 13.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 11,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 10.0,
'inlf': 1
},
{
'educ': 16.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 14.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 8.0,
'inlf': 1
},
{
'educ': 17.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 1
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 10.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 15.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 6.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 15.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 10.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 10,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
},
{
'educ': 8.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 13.0,
'inlf': 0
},
{
'educ': 11.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 17.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 9.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 12.0,
'inlf': 0
},
{
'educ': 14.0,
'inlf': 0
},
{
'educ': 16.0,
'inlf': 0
}
];
xScale.domain(d3.extent(data, function(d) {
return d.educ;
}));
var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) {
return xScale(d.educ);
}).strength(1))
.force("y", d3.forceY(function(d) {
return d.inlf ? height - 100 : height + 100
}))
.force("collide", d3.forceCollide(4))
.stop();
simulation.tick(120);
graphGroup.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale).ticks(20, ".0s"));
var circles = graphGroup.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("r", 3)
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
.cells path {
fill: none;
pointer-events: all;
}
.cells :hover circle {
fill: red;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
关于javascript - Beeswarm 图,根据 bool 值拆分 "swarm"y 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58006740/
假设我有这个变量 var image = "image.jpg"; 我正在尝试拆分变量图像的内容并将 _thumbs 插入其中以获得类似 image_thumbs.jpg 的内容。 我该如何解决这个问
我有一个包含多个问题和答案的单元格,其组织方式类似于 CSV。因此,为了将所有这些问题和答案分开,使用逗号作为分隔符的简单拆分应该很容易分开。 不幸的是,有些值使用逗号作为小数分隔符。有没有办法避免这
这是简单的代码: import std.algorithm; import std.array; import std.file; void main(string[] args) { aut
我正在尝试解析一个看起来像的 txt 文件 A - 19 B - 2 C - 3 我正在使用扫描仪方法读取它并在“- ”中拆分,以便我的输出看起来像: A 19 B 2 C 3 但是它似乎没有正确拆分
我有这些网址字符串 file:///home/we/Pictures/neededWord/3193_n.jpg file:///home/smes/Pictures/neededWord/jds_2
我正在解析一个 CVS 文件,如下所示: "07555555555",25.70,18/11/2010,01/03/2011,N,133,0,36,,896,537,547,,Mr,John,Doe,
我在脚本中使用以下行返回 $folder 处所有文件夹的所有路径地点。 dir -recurse $folder|?{$_.PSIsContainer}|select -ExpandProperty
我正在尝试将字符串格式化为word+word+word 例如 “超音乐节”变成“超+音乐+节日” 我尝试过使用以下代码 query.split(" ").join("+"); 或 query.repl
我叫 luis,住在 arg。我有一个问题,无法解决。 **IN BASH** pwd /home/labs-perl ls file1.pl file2.pl **IN PERL** my $ls
我想从包 javax.json 中拆分 JsonArray,但我找不到完成这项工作的便捷方法。我查看了文档,只能想到迭代 JsonArray 并使用 JsonArrayBuilder 手动添加项目。
我希望在第一个 ':' 处拆分字符串,以防止字符串的第二部分包含 ':' 时出现问题。我一直在研究正则表达式,但仍然遇到一些问题,有人可以帮我吗?谢谢。 最佳答案 您可以使用overload of s
我想拆分列表的列表 ((A,1,2,3),(B,4,5,6),(C,7,8,9))进入: (A,1) (A,2) (A,3) (B,4) (B,5) ... 我试过rdd.flatMapValues(
我有一个文本文件,其中每一行都有数据。它看起来像这样: number0;text0 number1;text1 number2;text2 ..等等 所以我通过 xmlhttprequest 将该文本
问题很简单——比如说,我得到了函数,它接收数组作为参数 void calc(double[] data) 如何将这些数据“拆分”成两个子数组并像这样传递给子函数 calc_sub(data(0, le
我想显示来自 EMAIL_TEXT 数据库列的数据,在定义的字符处拆分列。出于某种原因,我的结果只打印第一行到我拆分字符串的位置,跳过其余行。这是我希望在每个“|”之后拆分的数据。 这里是要拆分的数据
我有一个动态数组,我想排除字符串的第一部分,但我不知道第一部分之后会有多少对象,我想将它们全部包含在一个新字符串中。 string = "text.'''hi''','''who''' '''are'
我想拆分 URL 的某些特定部分,这是我目前所做的。 var query = window.location.pathname.split( '/' ); query = window.locati
我有一条消息携带 XML(订单),其中包含多个同质节点(比如产品列表)以及其他信息(比如地址、客户详细信息等)。我必须使用另一个外部服务提供的详细信息来丰富每个“产品”,并返回带有丰富“产品”的相同完
我有一个动态生成的大字符串,我正在拆分它。 var myString="val1, val, val3, val4..... val400" 我对此字符串进行了简单的拆分, myString= myS
这个问题在这里已经有了答案: Java String split removed empty values (5 个答案) 关闭 7 年前。 我正在尝试使用 split(";") 将字符串转换为数组
我是一名优秀的程序员,十分优秀!