如何为D3条形图应用模式？
我试图将一种模式应用于D3条形图，但得到的结果是：
- 图表应精确停在100000处
- 模式应该是“流动的”
我使用的绿色和红色图案定义如下：
var defs = this.svg.append("g:defs");
defs.append("g:pattern")
.attr("id", "red-fill")
.attr("patternUnits", "userSpaceOnUse")
.attr("width", "85")
.attr("height", "10")
.append("g:image")
.attr("xlink:href", "../10px-barchart-red.png")
.attr("x", 0)
.attr("y", 0)
.attr("width", 85)
.attr("height", 10);
var defs = this.svg.append("g:defs");
defs.append("g:pattern")
.attr("id", "green-fill")
.attr("patternUnits", "userSpaceOnUse")
.attr("width", "85")
.attr("height", "10")
.append("g:image")
.attr("xlink:href", "../10px-barchart-green.png")
.attr("x", 0)
.attr("y", 0)
.attr("width", 85)
.attr("height", 10);
该图由以下内容组成：
this.svg.selectAll("rect")
.data(dataset, getKeys)
.enter()
.append("rect")
.attr('class', 'bar')
.attr("x", function(d, i) {
return x(i) + 44;
})
.attr("y", function(d, i) {
return y(d.value);
})
.attr("width", x.rangeBand())
.attr("height", function(d, i) {
return height + padding - y(d.value);
})
.attr("fill", function(d) {
if (d.key == 0) {
return "url(#green-fill)";
} else {
return "url(#red-fill)";
}
})
共有1个答案
约翰·舒尔茨（John Schulz）的这一块成功地制作出了看起来非常棒的条形图(https://bl.ocks.org/jfsiii/7772281).
为了方便和永久，复制了下面代码片段中的代码（还添加了一点动画来显示它也能很好地转换）。
var first = true;
setInterval( function(){
if(first){
d3.select('.thing-2').transition()
.delay(500)
.duration(1000)
.attr('height',20)
.attr('y',80)
}else{
d3.select('.thing-2').transition()
.delay(500)
.duration(1000)
.attr('height',100)
.attr('y',0)
}
first = !first;
},2500)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
<style>
/* FF seems to need explicit dimensions */
svg {
width: 500px;
height: 500px;
}
rect.hbar {
mask: url(#mask-stripe)
}
.thing-1 {
fill: blue;
}
.thing-2 {
fill: green;
}
</style>
</head>
<body>
<svg>
<defs>
<pattern id="pattern-stripe"
width="4" height="4"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)">
<rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
</pattern>
<mask id="mask-stripe">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
</mask>
</defs>
<!-- bar chart -->
<rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect>
<rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect>
<rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect>
<!-- horizontal bar chart -->
<rect class="hbar thing-1" x="0" y="200" width="10" height="50"></rect>
<rect class="hbar thing-1" x="0" y="251" width="123" height="50"></rect>
<rect class="hbar thing-1" x="0" y="302" width="41" height="50"></rect>
</svg>
</body>
</html>-
我有一个这样的数据帧： 现在，我想绘制水平条形图，其中平台名称位于相应的条形图中，使其看起来像这样： 我该怎么做？
-
参考Mike Bostick的Stacked to Grouped Bar Chart示例，我正在修改它以处理CSV文件。我已经在这方面工作了几个星期，并且查看了关于堆栈溢出和其他地方的无数示例，我被难住了。 堆叠条形图工作。 堆叠条形图： 在函数中，我想乘以一个与序列或键对应的数字。我当前正在将此函数中的数字1乘以占位符。 和csv文件：
-
问题内容： 这是Highchart项目符号图表的示例http://jsfiddle.net/jlbriggs/LdHYt/1/ 如何将其转换为列项目符号图表？ 问题答案： 这是您要找的东西吗？小提琴
-
我试图理解他们条形图上的ChartJS文档。这对我来说没有意义，因为顶部的标签在一次意义上看起来似乎只适用于第一个栏（基于颜色），在另一种意义上，它适用于整个图表（它是唯一一个不在工具提示中的标签，它位于前面和中间） 我一直在努力使它更像他们的折线图，它显示了一个带有标签的图例和一个与图表上每条线相关的彩色正方形。（他们没有多行图表的示例，但它确实是这样工作的）。 我希望在顶部有一个图例，表示浅绿
-
在一个html页面中，我有一个选择菜单（a， b， c， d）和一个条形图（a， b， c， d）。我想做的是在选择菜单中选择的条形图中突出显示相应的条形图。
-
问题内容： 我有一些这样的数据： 我想创建一个水平分组的条形图，以便有3组条形，首先是所有value1条（标记为Value1），然后是所有value2条，最后是所有value3条。 我该怎么做-请记住，数据将来会动态更新，因此将添加新的数据对象，而其他数据对象将被删除。猜猜我可以使用id作为密钥。 问题答案： 首先，将数据提供或转换为一个或多个普通数组 现在，您可以使用d3.transpose来旋