小编JNP*_*Per的帖子
复杂的圆图
我花了很多时间尝试在SVG/D3.js中复制附图.我最接近的是使用附加的代码.我已经探索过使用树函数,但只能创建一个圆圈.
附加代码的问题是,通过手动键入每个圆圈必须坐的像素坐标,很难使其看起来平滑和智能.
有关信息,数据集只会为这些圆圈着色,因此在形状方面它可以完全是静态的.代码只需要生成形状,然后我可以根据数据集驱动颜色.
我想要创建的图像:
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 1000;
var h = 1000;
var dataset = [6, 2, 5, 4, 5, 5, 5, 5, 3, 4, 5, 6];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", function(d, i) {
var Xaxis;
if (i === 0) {
Xaxis = "500";
} …4
推荐指数
推荐指数
1
解决办法
解决办法
276
查看次数
查看次数