Question

因此，我试图在我使用D3在React中制作的线图中实现放大并使用D3附带的画笔功能的功能。我在网上看到许多用简单的javascript完成此操作的示例。我将如何在React中做到这一点？

我一直在做的方式是在代码的开头创建一个节点，将图的所有D3方面附加到该节点，然后引用该节点并在render（）和return语句中定义其尺寸在图形所在的组件中。

render()
{
    return(

        <svg style={{paddingTop: "25px"}}
        ref={node => this.node = node}
        width={this.state.svgWidth} height={this.state.svgHeight}>
        </svg>

    )
}

这是我一直使用D3渲染x和y轴以及基本形状的示例：

var x = scaleBand()
        .domain(mainXAxisTextArray)
        .range([0, width])

var y = scaleLinear()
        .domain(yAxisArray)
        .range([height, 0])

var xAxis = select(node)
            .append('g')
            .attr("transform","translate("+margin.left+","+(height + 15)+")")
            .style("font",".8em sans-serif")
            .call(axisBottom(x))
            .attr("id", "updateSize")
            .attr("class", 'xAxis')



var yAxis = select(node)
            .append('g')
            .attr("transform","translate("+margin.left+","+(margin.top)+")")
            .style("font",".8em sans-serif")
            .call(axisLeft(y).tickArguments([tickNum]).tickFormat(format("$,")))
            .attr("id", "updateSize")
            .attr('class', "yAxis")

let rect = select(node)
                .append("rect")
                .attr("width", rectWidth)
                .attr("height", height)
                .attr("y", margin.top)
                .attr("x", rectX)
                .attr("fill", "#d3d3d3")
                .attr("opacity", "0.2")
                .attr("id", "updateSize")
                .attr('class', 'forecastedSpendRectangle')

我一直在专门研究以下示例：https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我希望能够在此图形所在的React组件中执行此操作。我制作的图形与链接的示例之间的一些区别是，我的图形由一系列的线，点和文本组成，例如与仅具有路径的示例相反。

我意识到我必须导入适当的函数，但是我对如何在React中实际使用它们感到困惑。我已经使用D3 select做到了这一点，但是React中的画笔和缩放功能使我很困惑

D3笔刷和放大React

0 个答案: