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.

- 这两个jsfiddles之间的区别只是config1.fillShape参数。 - rect / circle

//破碎的条形码

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

//使用旧圆规版

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

剪辑区域的核心功能 - clipArea和drawShapeWave

clipArea函数

  // 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

您可以使用config中与矩形相同的值，在最新变体（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，width和height添加值：

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)

希望这可以解决您的问题。

d3.js水图bug

1 个答案: