如何使用d3.js为rect应用“background：repeating-linear-gradient”样式

Question

我无法使用d3为rect复制重复线性渐变样式。

例如 我有以下 div 样式：

.colorbarssegment{ 
     background: repeating-linear-gradient( to right, 
                        #c0c0c0, #c0c0c0 4px, 
                        #c0c000 4px, #c0c000 8px, 
                        #00c0c0 8px, #00c0c0 12px, 
                        #00c000 12px, #00c000 16px, 
                        #c000c0 16px, #c000c0 20px, 
                        #c00000 20px, #c00000 24px, 
                        #0000c0 24px, #0000c0 28px);
 }

当我在div中使用类时：

<div class="colorbarssegment" style="width: 200px; height: 20px;"></div>

它看起来像：

如何在 d3.js 中为 rect 应用相同的样式？

Answer 1

您必须按照本页所述在SVG中定义模式： https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

我创造了一个小提琴，其模式类似于你所需要的： http://jsfiddle.net/11k570ud/

之后，您将rect属性：

fill="url(#yourPatternID)"

您可以在svg代码中包含它，也可以使用D3.js添加它。可以找到有关如何执行此操作的说明here（此帖子使用渐变，但模式以非常类似的方式工作）。

Answer 2

查看this fiddle！我认为这个解决方案可以满足您的需求。

ZonedDateTime.now()