d3.js: кисть с проблемами d3.svg.area

Question

Я пытаюсь сделать инструмент для рисования произвольной фигуры, как в этом примере, - Line Drawing, но используя путь непосредственно с fill - не stroke. Вот что я уже сделал - https://jsfiddle.net/zeleniy/b14paam2/. Пример уже содержит одиночную произвольную цифру пути, но вы можете рисовать самостоятельно, используя перетаскивание.

Как вы можете видеть, есть две проблемы:

1. Nib наклонена я не знаю, почему. Как следствие, при рисовании диагональной линии от верхнего правого до нижнего левого или наоборот пути почти невидимы.

2. В местах, где путь пересекает само заполнение, отсутствуют.

Как исправить эти проблемы?

Answer 1

Вы можете использовать линию вместо области, она больше подходит для кисти.

var path; 
 

 
var area = d3.svg.line() 
 
    .x(function(d) { return d[0]; }) 
 
    .y(function(d) { return d[1]; }) 
 
    .tension(0) 
 
    .interpolate("basis"); 
 

 
var svg = d3.select("svg") 
 
\t .call(d3.behavior.drag() 
 
\t \t .on("dragstart", dragstarted) 
 
    .on("drag", dragged) 
 
    .on("dragend", dragended)); 
 

 
function dragstarted() { 
 
    path = svg.append("path").datum([]).attr("class", "line") 
 
    \t \t \t .attr({ 
 
     \t "fill": "none", 
 
      "stroke": "lightblue", 
 
      "stroke-width": 25 + "px", 
 
      "stroke-linejoin": "round" 
 
     }); 
 
} 
 

 
function dragged() { 
 
    path.datum().push(d3.mouse(this)); 
 
    path.attr("d", area); 
 
} 
 

 
function dragended() { 
 
    path = null; 
 
}

svg { 
 
    border: 2px solid gray; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script> 
 
<h2>Paint with brush</h2> 
 
<svg width="100%" height="300px"></svg>