Получить шаблон из d3 и установить его как границу div - PullRequest
Новая
       9

Получить шаблон из d3 и установить его как границу div

0 голосов
/ 04 февраля 2019

Я создал шаблон для 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);

И возвращаю его как цвет в параметрах c3.js: 

data: {
            type: 'bar',
            columns: [],
            types: {},
            axes: {},
            classes: {},
            color: function (color, d) {
                .....
                return `url(#${hatchId})`;
            },
        },

это выглядит примерно так

enter image description here

но мне нужно добавить элементы с таким шаблоном - например, легенда с рамкой

Я пытаюсь создать: 

`<div style="border-color: url(#${hatchId});">Name</div>`

Шаблон не найден

Можно ли получить шаблон из d3 и использовать его в других местах, кроме c3?

1 Ответ

0 голосов
/ 04 февраля 2019

Да, это возможно.

Шаблон , созданный d3, является просто обычным 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>
...