d3.js - 带点的 D3 条形图背景
问题描述
我发现这个 d3 示例显示了一个具有纯色背景和对角线图案的条形图。我正在尝试通过修改“d”属性来修改它以显示点、实心、白色圆圈而不是线条,但认为可能有更好的方法来做到这一点。
这是我的小提琴显示对角线:
http://jsfiddle.net/ljp007/gruc1vod/1/
var svg = d3.select("body").append("svg");
svg
.append('defs')
.append('pattern')
.attr('id', 'diagonalHatch')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
.append('path')
.attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
.attr('stroke', '#fff')
.attr('stroke-width', 1);
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", 'blue');
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.attr('fill', 'url(#diagonalHatch)');
这就是我想要实现的目标:
这些点不绘制数据,而只是为了外观,以将此条与图表中的其他条区分开来。如何将线条转换为点以实现此目的?
解决方案
不要向填充图案添加路径,而是添加几个圆圈,并稍微修改图案的大小。
var svg = d3.select("body").append("svg");
var pattern = svg.append('defs')
.append('pattern')
.attr('id', 'dots')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 12)
.attr('height', 12);
pattern.append('circle')
.attr('cx', 2)
.attr('cy', 2)
.attr('r', 2)
.attr('fill', 'white');
pattern.append('circle')
.attr('cx', 8)
.attr('cy', 8)
.attr('r', 2)
.attr('fill', 'white');
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", 'blue');
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.attr('fill', 'url(#dots)');
cx
and属性设置圆心的cy
x 和 y 坐标,而r
属性设置其半径。
您还可以在圆圈之前的图案中附加一个填充的蓝色矩形,以消除在图表中创建背景和覆盖矩形的需要。您可以将任何基本形状添加到图案中,当您使用它来填充时,它们将与样式一起重复。
var svg = d3.select("body").append("svg");
var pattern = svg.append('defs')
.append('pattern')
.attr('id', 'dots')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 12)
.attr('height', 12);
pattern.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', 12)
.attr('height', 12)
.attr('fill', 'blue');
pattern.append('circle')
.attr('cx', 2)
.attr('cy', 2)
.attr('r', 2)
.attr('fill', 'white');
pattern.append('circle')
.attr('cx', 8)
.attr('cy', 8)
.attr('r', 2)
.attr('fill', 'white');
// Now the pattern can be used and re-used to fill any shapes.
svg.append('rect')
.attr('x', 0)
.attr('width', 100)
.attr('height', 100)
.attr('fill', 'url(#dots)');
svg.append('circle')
.attr('cx', 160)
.attr('cy', 50)
.attr('r', 50)
.attr('fill', 'url(#dots)');
这使:
推荐阅读
- javascript - 初始化 Javascript/Typescript 对象,其中内容“指向”由 observable 初始化的东西
- azure - 在 azure-functions 中使用外部程序
- r - 我想替换向量“Dist_AU25M”中的值,但不更改数据框中的值
- http - 网站使用了错误的证书。连接是否仍然加密?
- ruby-on-rails - 在 YAML 字符串中嵌入 YAML 别名
- python - 如何将一个 ipynb 文件中定义的变量访问到 jupyter 笔记本中的另一个文件中?
- sql - 左连接条件并限制匹配条件的最大值
- javascript - Chrome:window.opener.myFunction() 在开发者工具打开时工作,但在开发者工具关闭时不起作用
- spring - 在 Tomcat 7 上启动战争时,pom.xml 中的可能差异会阻止 Spring 映射
- kotlin - 使用 SoundPool 进行游戏