Question

我发现这个d3示例显示了一个带有纯色背景和对角线图案的条形图。我试图修改它以显示点，实心，白色圆圈而不是线条，通过修改＆＃39; d＆＃39;属性，但认为可能有更好的方法来做到这一点。

这是我的小提琴，显示对角线：

var svg = d3.select("body").append("svg");

svg
  .append('defs')
  .append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 4)
    .attr('height', 4)
  .append('path')
    .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
    .attr('stroke', '#fff')
    .attr('stroke-width', 1);

svg.append("rect")
      .attr("x", 0)
      .attr("width", 100)
      .attr("height", 100)
      .style("fill", 'blue');

svg.append("rect")
    .attr("x", 0)
    .attr("width", 100)
    .attr("height", 100)
    .attr('fill', 'url(#diagonalHatch)');

这就是我想要实现的目标：

点不会绘制数据，而只是用于将此栏与图表中的其他栏区分开来。如何将线转换为点来实现此目的？

Answer 1

不要在填充图案中添加路径，而是添加几个圆圈，并稍微修改图案的大小。

var svg = d3.select("body").append("svg");

var pattern = svg.append('defs')
  .append('pattern')
    .attr('id', 'dots')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 12)
    .attr('height', 12);

pattern.append('circle')
  .attr('cx', 2)
  .attr('cy', 2)
  .attr('r', 2)
  .attr('fill', 'white');

pattern.append('circle')
  .attr('cx', 8)
  .attr('cy', 8)
  .attr('r', 2)
  .attr('fill', 'white');

svg.append("rect")
  .attr("x", 0)
  .attr("width", 100)
  .attr("height", 100)
  .style("fill", 'blue');

svg.append("rect")
  .attr("x", 0)
  .attr("width", 100)
  .attr("height", 100)
  .attr('fill', 'url(#dots)');

cx和cy属性设置圆心的x和y坐标，而r属性设置其半径。

您还可以在圆圈之前将填充的蓝色矩形附加到图案，以消除在图表中创建背景和叠加矩形的需要。您可以将任何基本形状添加到图案中，当您使用它填充时，它们将与其样式一起重复。

var svg = d3.select("body").append("svg");

var pattern = svg.append('defs')
  .append('pattern')
    .attr('id', 'dots')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 12)
    .attr('height', 12);

pattern.append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', 12)
  .attr('height', 12)
  .attr('fill', 'blue');

pattern.append('circle')
  .attr('cx', 2)
  .attr('cy', 2)
  .attr('r', 2)
  .attr('fill', 'white');

pattern.append('circle')
  .attr('cx', 8)
  .attr('cy', 8)
  .attr('r', 2)
  .attr('fill', 'white');

// Now the pattern can be used and re-used to fill any shapes.

svg.append('rect')
  .attr('x', 0)
  .attr('width', 100)
  .attr('height', 100)
  .attr('fill', 'url(#dots)');

svg.append('circle')
  .attr('cx', 160)
  .attr('cy', 50)
  .attr('r', 50)
  .attr('fill', 'url(#dots)');

给出了：

Answer 2

svg
  .append('defs')
  .append('pattern')
    .attr('id', 'dotsPattern')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 10)
    .attr('height', 10)
  .append('circle')
    .attr('cx', 5)
    .attr('cy', 5)
    .attr('r', 3)
    .style('fill', 'white');

Updated JSFiddle

结果：

或者更类似于你的替代风格（需要两个圆圈）：

var pattern = svg
  .append('defs')
  .append('pattern')
    .attr('id', 'dotsPattern')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 20)
    .attr('height', 20);
pattern.append('circle')
    .attr('cx', 5)
    .attr('cy', 5)
    .attr('r', 3)
    .style('fill', 'white');
pattern.append('circle')
    .attr('cx', 15)
    .attr('cy', 15)
    .attr('r', 3)
    .style('fill', 'white');

JSFiddle

结果：

Answer 3

关键是在模式定义中定义不同的svg元素（圆圈）。这是一个接近你画的...

var svg = d3.select("body").append("svg");

svg
  .append('defs')
  .append('pattern')
    .attr('id', 'dotFill')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('patternTransform', 'rotate(45)')
    .attr('width', 10)
    .attr('height', 10)
  .append('circle')
    .attr('cx', 5)
    .attr('cy', 5)
    .attr('r', 2)
    .attr('fill', '#fff')
    .attr('stroke', '#fff')
    .attr('stroke-width', 1);

svg.append("rect")
      .attr("x", 0)
      .attr("width", 100)
      .attr("height", 100)
      .style("fill", 'blue');

svg.append("rect")
    .attr("x", 0)
    .attr("width", 100)
    .attr("height", 100)
    .attr('fill', 'url(#dotFill)');

D3与小点的长条图背景

3 个答案: