从 d3 获取模式并将其设置为 div 的边框
Get pattern from d3 and set it like border of div
我为 d3 创建了一个模式:
d3.select('defs')
.append('pattern')
.attr('id', hatchId)
.attr('width', 14)
.attr('height', 14)
.attr('patternUnits', 'userSpaceOnUse')
.attr('patternTransform', 'rotate(45 0 0 )')
.attr('fill', color)
.append('rect')
.attr('height', 14)
.attr('width', 14);
d3.select(hatchId)
.append('line')
.attr('y2', 14)
.attr('opacity', '0.3')
.style('stroke', '#fff')
.attr('stroke-width', 6);
和return它喜欢c3.js选项中的颜色:
data: {
type: 'bar',
columns: [],
types: {},
axes: {},
classes: {},
color: function (color, d) {
.....
return `url(#${hatchId})`;
},
},
看起来像这样
但我需要添加具有这种模式的元素 - 例如,带边框的图例
我尝试创建:
`<div style="border-color: url(#${hatchId});">Name</div>`
未找到模式
是否可以从 d3 获取模式并在 c3 以外的其他地方使用它?
是的,这是可能的。
d3 创建的 pattern 只是普通的 SVG。您可以将其作为填充或描边应用于 SVG 形状,但不能将其应用于 HTML。
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="5%" height="5%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<rect x="120" width="100" height="100" fill="none" stroke-width="6" stroke="url(#star)"/>
</svg>
我为 d3 创建了一个模式:
d3.select('defs')
.append('pattern')
.attr('id', hatchId)
.attr('width', 14)
.attr('height', 14)
.attr('patternUnits', 'userSpaceOnUse')
.attr('patternTransform', 'rotate(45 0 0 )')
.attr('fill', color)
.append('rect')
.attr('height', 14)
.attr('width', 14);
d3.select(hatchId)
.append('line')
.attr('y2', 14)
.attr('opacity', '0.3')
.style('stroke', '#fff')
.attr('stroke-width', 6);
和return它喜欢c3.js选项中的颜色:
data: {
type: 'bar',
columns: [],
types: {},
axes: {},
classes: {},
color: function (color, d) {
.....
return `url(#${hatchId})`;
},
},
看起来像这样
但我需要添加具有这种模式的元素 - 例如,带边框的图例
我尝试创建:
`<div style="border-color: url(#${hatchId});">Name</div>`
未找到模式
是否可以从 d3 获取模式并在 c3 以外的其他地方使用它?
是的,这是可能的。
d3 创建的 pattern 只是普通的 SVG。您可以将其作为填充或描边应用于 SVG 形状,但不能将其应用于 HTML。
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="5%" height="5%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<rect x="120" width="100" height="100" fill="none" stroke-width="6" stroke="url(#star)"/>
</svg>