d3.js - 如何使用/检索生成后的 C3 比例函数？

Question

我正在使用 C3 生成图表，并发现有必要深入研究底层 D3 构造以补充其功能。我陷入了僵局，需要绘制一个受 x 值和 y 值限制的区域，但 C3 的“区域”功能只允许其中一个。所以，我需要在 C3 生成的图表上在适当的位置绘制一个矩形，但使用比例函数来确定新矩形的 X/Y 值。有没有办法用 C3 或底层 D3 库来做到这一点？

Answer 1

您可以从 chart.internal（chart.internal.x 和 chart.internal.y）访问 scale 函数。您可能也需要保证金（否则您的头寸将被抵消那么多）

这是从点 (0 index, 100) 到 (2 index, 400) 绘制矩形的方法

var rect = chart.internal.svg.append("rect")
    .attr('fill', 'rgba(255, 9, 0, 0.1)')
    .attr("x", chart.internal.x(0) + chart.internal.margin.left)
    .attr("y", chart.internal.y(400) + chart.internal.margin.top)
    .attr("width", chart.internal.x(2) - chart.internal.x(0))
    .attr("height", chart.internal.y(100) - chart.internal.y(400));

小提琴 - http://jsfiddle.net/hehpy91o/