css - 如何使用 d3.js 为 rect 应用 "background: repeating-linear-gradient"样式

Question

我在使用 d3 为 rect 复制 repeating-linear-gradient 样式时遇到问题。

例如: 我有以下 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

我创建了一个 fiddle ，其模式与您需要的类似: http://jsfiddle.net/11k570ud/

之后，你给 rect 属性:

fill="url(#yourPatternID)"

您可以将其包含在 svg 代码中，或使用 D3.js 添加。可以找到有关如何执行此操作的说明 here (这篇文章使用渐变，但模式的工作方式非常相似)。