javascript - d3.js 水图错误

Question

我已经将水图 - 使用圆形仪表 - 导出为矩形条，但剪切路径没有占据图表的整个高度。

//问题

1. The axis text does not wrap cleanly -- I need it to do so to make it legible.
2. The rectangle is more of a square -- it needs to be more "bar chart" like - consume more vertical space but render correctly.

-- 这两个 jsfiddle 之间的区别只是 config1.fillShape 参数。 -- 矩形/圆形

//断条版

http://jsfiddle.net/0ht35rpb/132/

//工作旧圆规版本

http://jsfiddle.net/0ht35rpb/133/

裁剪区域的核心函数——clipArea和drawShapeWave

剪辑区域函数

  // The clipping wave area.
  const clipArea = d3.area()
    .x(function(d) {
      return waveScaleX(d.x);
    })
    .y0(function(d) {
      return waveScaleY(Math.sin(Math.PI * 2 * config.waveOffset * -1 + Math.PI * 2 * (1 - config.waveCount) + d.y * 2 * Math.PI));
    });

  if (config.fillShape == "circle") {
    clipArea
      .y1(function(d) {
        return (fillCircleRadius * 2 + waveHeight);
      });
  } else {
    clipArea
      .y1(function(d) {
        return (fillCircleRadius * 2 + waveHeight);
      });
    //.y1(function(d) { return (config.height - (fillCircleRadius * 2) + waveHeight); } );
  }

和drawShape

  var drawShapeWave = function(shape) {
    // Draw the wave shape.

    if (shape == "circle") {
      fillGroup.append("circle")
        .attr("cx", radius)
        .attr("cy", radius)
        .attr("r", fillCircleRadius);
    } else {
      fillGroup.append("rect")
        .attr("x", radius - fillCircleRadius)
        .attr("y", radius - fillCircleRadius)
        .attr("width", fillCircleRadius * 2)
        .attr("height", fillCircleRadius * 2)
        //.attr("height", config.height - (fillCircleRadius * 2));
    }

    fillGroup
      .style("fill", config.waveStartColor)
      .transition()
      .duration(config.waveColorDuration)
      .style("fill", config.waveColor);
  }

//也许这个代码示例有一个解决方案。

http://jsfiddle.net/NYEaX/1860/

---

更新

我删除了一些代码，只留下方形水图本身

http://jsfiddle.net/0ht35rpb/141/

---

我创建了一个版本，其中半径是高度的一半 - 就在顶部 - 所以它创建了一个巨大的正方形 - 只是被剪裁了 - 但这不是很干净 - 它仍然有点冷漠正确控制剪切路径。

http://jsfiddle.net/0ht35rpb/145/

---

更新 2 -- 12/09/2017

我已将容器和波浪放置在单独的 g 元素中——它在宽度 70 到 90 之间看起来很稳定——但超过它就开始破裂……如果你能破译出什么问题——提供一个井记录在案的答案 - 赏金是你的。

http://jsfiddle.net/0ht35rpb/165

Answer 1

在最新的变体 (jsfiddle.net/0ht35rpb/145) 中，您可以通过使用与矩形相同的配置值来使剪切路径成为矩形:

fillGroup.append("rect")
    .attr("x", config.width-5)
    .attr("y", 0)
    .attr("width", config.width)
    .attr("height", config.height)

要为剪辑路径添加边距(因此剪辑路径的面积较小)，请为 x、y、宽度和高度添加一个值:

fillGroup.append("rect")
    .attr("x", config.width - 5 + config.margin)
    .attr("y", config.margin)
    .attr("width", config.width - 2 * config.margin)
    .attr("height", config.height - 2 * config.margin)

希望这能解决您的问题。