我正在开发一个使用四方数据的应用程序。
//这是经过深入研究的系列图表 - 但这里仍然存在一些错误。
所以我们有一批数据 - 健康与美容、餐厅、咖啡馆、公共(public)场所。 -- 会有 COUNT 个 -- 以及结帐信息的总和。 所以我希望这张图表能够显示 field 的数量，但也能表明它们有多受欢迎……例如，酒吧的数量可能会更少，但签到的数量会更高，因为它们更受欢迎。所以在那种情况下想要反转圆圈的颜色。
当前的代码尝试存在一些错误。
- 圆圈/圆圈间距的交换导致黑色路径撕裂和奇怪的行为
- 对于线条，我希望在蓝色圆圈下方有一条黑线，但在蓝色圆圈内部显示一条裁剪的圆圈路径橙色线——这是一种掩蔽能力。
用“V”代替“L”，但暂时无法正常工作。
第 2 阶段 我认为它的工作更加一致，但存在一些问题。另外，我不确定圆圈的数据和缩放比例。 (我添加了额外的标签，以便可以看到圆圈的值是什么)
稍微更改了 getCircleSize，尽管我认为更一致的做法应该是这样 layerSet.push(parseInt(getPercentage(layerArray[i], meansPerGroup[0])*60, 10)) ;
所以这里第一步首先按大小顺序绘制圆圈...所以在这种情况下按计数..但这里可能存在错误，反转颜色以指示 checkin 计数 - 所以也许我们需要排序计数，检查顺序 - 这样第一个被绘制的圆圈就会正确跟随。
// Create Circles
function setCircles(items) {
// sort elements in order to draw them by size
items.sort(function(a, b) {
return parseFloat(b.value) - parseFloat(a.value);
});
var circlelayer = svg.append("g")
.attr("class", "circlelayer");
var circle = circlelayer.selectAll("circle")
.data(items);
circle.enter().append("circle")
.attr("class", function(d, i) {
if (d.l == 0) {
return "blue";
}
return "gold";
})
.attr("cy", 60)
.attr("cx", function(d, i) {
var distance = calculateDistance(d, items);
if (d.l == 1) {
distancesL1.push(distance);
} else {
distancesL0.push(distance);
}
return distance;
})
.attr("r", function(d, i) {
return Math.sqrt(d.value);
})
.attr("filter", function(d) {
return "url(#drop-shadow)";
});
circle.exit().remove();
}
json 结构看起来像这样
[{
"label": "Health and Beauty",
"count": 30,
"checkin": 100
}, {
"label": "Restaurants",
"count": 23,
"checkin": 200
}, {
"label": "Cafes",
"count": 11,
"checkin": 900
}, {
"label": "Public Houses",
"count": 5,
"checkin": 1000
}]
最佳答案
我不确定我明白你的问题是什么，但我决定尝试根据你的截图和你的 plunker 的示例数据创建该图表。这是我的结果:
我的脚本确保较小的圆圈始终位于愤怒的圆圈之上，因此两个圆圈始终可见。 在这里你可以找到我的代码:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
html {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="container">
</div>
<script>
const data = [{
"name": "Twitter",
"vists": "15 billion",
"unit": "per day",
"layer1value": 15000000,
"layer2value": 450
}, {
"name": "Facebook",
"vists": "5 billion",
"unit": "per day",
"layer1value": 4000000,
"layer2value": 5000000
}, {
"name": "Google",
"vists": "5 billion",
"unit": "per day",
"layer1value": 5000000,
"layer2value": 25000
}, {
"name": "Netflix",
"vists": "10 billion",
"unit": "per day",
"layer1value": 3000000,
"layer2value": 2200
}, {
"name": "Ebay",
"vists": "8 billion",
"unit": "per day",
"layer1value": 2500000,
"layer2value": 4900000
}, {
"name": "Klout",
"vists": "2 billion",
"unit": "per day",
"layer1value": 1000000,
"layer2value": 45
}];
/*
* Finding max and min layer size
*/
const values = data.reduce((acumulator, datum) => [...acumulator, datum.layer1value, datum.layer2value], []);
const maxValue = Math.max(...values);
const minValue = Math.min(...values);
/*
* Creating scale based on the smallest and largest layer1value or layer2value
*/
const radiusScale = d3.scaleLinear()
.domain([minValue, maxValue])
.range([10, 150]); // min and max value of the circle
const width = 900;
const height = 500;
const orangeColour = '#ffb000';
const blueColour = '#00a1ff';
// Creating svg element
const svg = d3.select('#container').append('svg').attr('width', width).attr('height', height);
let xPos = 0; // position of circle
/*
* iterate over each datum and render all associated elements: two circles, and two labels with pointer lines
*/
for (let i = 0; i < data.length; i++) {
const d = data[i]; // current data point
const currMaxRadius = radiusScale(Math.max(d.layer1value, d.layer2value)); // get largest radius within current group of two layers
xPos += currMaxRadius; // add that radius to xPos
// create group element containing all view elements for current datum
const group = svg.append('g')
.attr('transform', `translate(${xPos}, ${height / 2})`);
group.append('circle')
.attr('r', radiusScale(d.layer1value))
.style('fill', blueColour);
group.insert('circle', d.layer2value > d.layer1value ? ':first-child' : null) // if layer2value is larger than layer1value then insert this circle before the previous one
.attr('r', radiusScale(d.layer2value))
.style('fill', orangeColour);
xPos += currMaxRadius * 0.9;
/*
* ADDING LABEL UNDERNEATH THE CIRCLES
*/
group.append('text')
.text(d.name)
.attr('dy', radiusScale(maxValue) + 40) // add 40px of padding so label is not just bellow the circle
.style('text-anchor', 'middle');
group.append('line')
.attr('y1', radiusScale(d.layer2value))
.attr('y2', radiusScale(maxValue) + 20) // add 20px of padding so the pointer line is not overlapping with label
.style('stroke', orangeColour);
/*
* ADDING LABEL AT THE ANGLE OF 45deg RELATIVE TO THE CIRCLES
*/
// we are creating new group element so we can easily rotate both line and label by -45deg
const rotatedLabelGroup = group.append('g').style('transform', 'rotate(-45deg)');
rotatedLabelGroup.append('line')
.attr('x1', radiusScale(d.layer2value))
.attr('x2', radiusScale(maxValue) + 20)
.style('stroke', orangeColour);
rotatedLabelGroup.append('text')
.text(d.vists)
.attr('dx', radiusScale(maxValue))
.attr('dy', -5); // this way label is slightly above the line
}
</script>
</body>关于javascript - d3.js Checking/Count 系列图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39306307/