Accepted answer

You can use line instead of area, it is more suitable for brush.

var path;

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

var svg ="svg")
		.on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended));

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

function dragged() {
  path.attr("d", area);

function dragended() {
  path = null;
svg {
  border: 2px solid gray;
<script src=""></script>
<h2>Paint with brush</h2>
<svg width="100%" height="300px"></svg>

Related Query

More Query from same tag