Question

我正在玩 bl.ocks.org 上给出的示例Force Dragging III。

我可以从JSON加载弧/节点的颜色，大小和标签，但我面临以下3个问题：
1.无法指定标签的大小。
2.标签隐藏在圆圈后面，如何将其带到前台虽然它是微不足道的，但我在整个圆圈中看到一条白线（圆弧起始位置）

我在上面的示例中调整了代码：

function drawNode(d) {
  context.beginPath(); 
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 10, 0, 2 * Math.PI);
  context.fillStyle = colors(d.group); 
  context.fill();
  context.strokeStyle = "#fff";
  context.fillText(d.label, d.x,d.y);
  context.stroke();
}

Answer 1

如果你提供了你所做的调整，那就太好了但是无论如何我在上一个问题中知道你的代码，你曾询问过关于设置节点颜色的问题。我正准备回答，但看到了安德鲁对它的完美答案。

无论如何，这是一个分叉： https://bl.ocks.org/shashank2104/daa2fb78c966581d4ae35d6b98ec14d9/8d8fbb6caf0a37e4cd9b8d8236cbcad5ea149ce4

可以在context.font属性的帮助下定义标签的大小。查看docs有关如何更改此值的信息。我使用默认值为13px。我不确定你打算如何通过这个尺寸，但我建议你为尺寸创建一个新的d3线性刻度。
```
context.font = (d.labelSize ? d.labelSize : 13)+'px Arial';
```
当您为标签和节点应用相同的颜色时，标签看起来像一样隐藏，但它们实际上并不是因为您保持先绘制圆圈的顺序然后是文本。这只是使用不同颜色的问题。我为标签创建了一个新的色标。（我只是使用组名作为测试标签）。
```
labelColors = d3.scaleOrdinal().range(['white', 'orange', 'blue', 'black', 'purple']);
```
这个很有意思。白线取决于您在x函数中使用的context.moveTo()值。画布上下文移动到d.x+3等于圆心+ 3px 并开始绘制圆弧。为此，它向右移动7px（由于半径为10）并开始绘制一个圆。当您将strokeStyle设置为#fff时，您会看到白线。要解决此问题，我已将context.moveTo()更改为以下内容：
```
context.moveTo(d.x+10, d.y);
```
将移动到弧本身并绘制一个圆圈。

这是新功能：

function drawNode(d) {
  context.beginPath(); 
  context.moveTo(d.x+10, d.y);
  context.arc(d.x, d.y, 10, 0, 2 * Math.PI);
  context.strokeStyle = "#fff";
  context.stroke();  
  context.fillStyle = nodeColors(d.group); 
  context.closePath();
  context.fill();
  context.beginPath();  
  context.font = (d.labelSize ? d.labelSize : 13)+'px Arial';
  context.fillStyle = labelColors(d.group);
  context.fillText(d.label ? d.label : d.group, d.x,d.y);
  context.closePath();
}

注意：

当您在循环中在画布上绘制某些内容时，始终建议使用context.beginPath()和context.closePath()。

希望这是有道理的。如果您有任何问题，请告诉我。

标签大小并在前台显示

1 个答案: