Полосатый фон в d3pie.js

Question

Мы используем d3pie [http://d3pie.org/#generator-result] библиотеку по d3 для создания круговой диаграммы и хотели бы знать, как заменить фон в ней полосками.

Если вы посмотрите на URL, http://d3pie.org/#generator-result, вы можете обнаружить, что d3pie в настоящее время предоставляет только три атрибуты, связанную с т Этикетка данных, значение и цвет, как показано ниже:

{ 
    "label": "Test", 
    "value": 311, 
    "color": "#d96d6d" 
} 

Не знаю, как изменить равнину цвет фона, чтобы выглядеть как полосы. Пробовал линейные градиенты, как в Css вместо шестиугольных значений для цветового атрибута, но это не помогает.

Answer 1

Вы можете использовать SVG pattern заливку и mask для достижения этой цели: http://jsfiddle.net/henbox/wt45qfkz/2/

pattern заимствовано из this answer к предыдущему вопросу.

маска и рисунок наносятся на каждый отдельный кусочек пирога с помощью:

var arcs = vis.selectAll("g.slice") 
    .data(pie).enter() 
    .append("svg:g") 
    .attr("class", "slice") 
    .attr("style", "fill:url(#stripe);") 
    .attr("style", "mask:url(#mask);"); 

Однако вы можете столкнуться, чтобы неприятности, когда вы добавляете метку: Если вы поместите его в тот же g элемента, полоса будет также применимы к тексту