如何使用/检索C3缩放函数post生成？ [英] How do I use/retrieve the C3 scale function post generate?

问题描述

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

I am using C3 to generate a chart and have found it necessary to dig into the underlying D3 constructs to supplement its functionality. I'm at an impasse and need to draw a region that is both limited by the x values and the y values but the "regions" functionality of C3 only allows one or the other. So, I need to draw on the C3-generated chart a rect at the appropriate location but using the scale functions to determine the X/Y values of the new rect. Is there any way to do this with C3 or underlying D3 library?

推荐答案

您可以访问scale函数从chart.internal （chart.internal.x和chart.internal.y）。

You can access the scale function from the chart.internal (chart.internal.x and chart.internal.y). You'll probably need the margins too (otherwise your positions will be offset by that much)

这里是如何从点（0索引，100）绘制一个矩形到2 index，400）

Here's how you draw a rectangle from point (0 index, 100) to (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/

这篇关于如何使用/检索C3缩放函数post生成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！