d3.js 水图表 bug

Question

d3.js 水图表 bug

4

我已经将一个使用“圆形表盘”的水图表转换成了矩形条形图，但是剪辑路径没有完全采用图表的高度。

//问题

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参数。--矩形/圆形

//损坏的条形版本

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/

我创建了一个版本，其中半径是高度的一半 - 就在顶部 - 因此它创建了一个巨大的正方形 - 只是被剪辑了 - 但这不是非常干净的 - 并且仍然有点 aloof 在正确控制剪切路径上。

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

更新2--2017年12月9日

我将容器和波浪放置在单独的g元素中--宽度从70到90似乎很稳定--但超过那个范围，它开始崩溃..如果您可以解密出错了什么-提供一个文档完整的答案-赏金归您。

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

- user7910704

这是因为您基本上是使用半径作为仪表的宽度和高度。由于您的仪表是矩形的，所以宽度和高度是不同的，因此您需要分别获取和设置它们，而不是使用 fillCircleRadius。 - Terry

@Terry - 我有同样的问题。我试图尽可能地使代码DRY，并隔离各种函数，但我不确定是什么影响了剪辑波的高度，或者是否正确地调整了比例以调整代码。 - user7910704

我一直在测试，如果你使用Chrome控制台进行调试并将height="52.5"编辑为例如height="100"或200，则它可以正常工作，因此，你需要知道52.5来自哪里。 - z3nth10n

但你看，这是调整矩形大小、剪切波等的情况。 - user7910704

请查看 def> clippath id ="clipwaveliquid__xx" 中的 transform - 将 y 设置为 127。waveGroup.attr('transform','translate('+waveGroupXPosition+','+waveRiseScale(0)+')') - user7910704

显示剩余9条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JusMalcolm · 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、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)

希望这能解决你的问题。