相关疑难解决方法(0)
SVG标记 - 我可以设置长度和角度吗？
我试图从圆心开始画一个角度(60度)的6支装
通过手动设置坐标可以实现图片中的内容.是否可以使用角度和长度来绘制这6支？如有必要,我愿意使用图书馆.
<defs>
<marker id="markerCircle" markerwidth="13" markerheight="13" refx="5" refy="7" orient="auto">
<circle cx="7" cy="7" r="3" style="stroke: none; fill:#ef4b22;" />
</marker>
</defs>
<path d="M150,5 L150,55"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M25,60 L75,95"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M20,225 L68,200"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M275,60 L225,95"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M280,225 L220,200"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" /> …16
推荐指数
推荐指数
2
解决办法
解决办法
1403
查看次数
查看次数
复杂的圆图
我花了很多时间尝试在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
查看次数
查看次数