Reactjs 呈现未硬编码的D3代码

我注意到在很多D3文档中，图表、图表、页边距等都是硬编码的。xAxis是500px，等等。。这对我没什么帮助。所以我在想我怎样才能在React中实现一种动态的呈现D3内容的方法

例如，在下面的代码中，我只是基于一些时间序列股票价格数据渲染一行。我在componentDidMount中有一些D3代码，但考虑到D3的工作方式，它需要具体的宽度和高度值。但是在

componentDidMount

中，我还没有这些值。假设此单线图是网格布局中div中的100个其他图之一

那么，如何获得div/svg的宽度/高度，然后才计算D3代码并渲染svg呢

componentDidMount() {

        console.log("componentDidMount")


        const data = this.props.data;
        const selectX = this.props.selectX;
        const selectY = this.props.selectY;

        console.log(data)

        const xScale = d3ScaleTime()
            .domain(d3ArrayExtent(data, selectX))
            .range([0, 1]);

        const yScale = d3ScaleTime()
            .domain(d3ArrayExtent(data, selectY))
            .range([1, 0]);

        const xAxis = d3AxisBottom()
            .scale(xScale)
            .ticks(data.length / 8);

        const yAxis = d3AxisLeft()
            .scale(yScale)
            .ticks(3);

        const selectScaledX = datum => xScale(selectX(datum));
        const selectScaledY = datum => yScale(selectY(datum));

        const sparkLine = d3Line()
            .x(selectScaledX)
            .y(selectScaledY);

        const linePath = sparkLine(data);

        console.log(linePath);

        this.setState({
            linePath: linePath
        });
    }

---

我试图在下面的演示中模仿您的问题

类图表扩展了React.Component{
componentDidMount（）{
var数据=this.props.data；
var containerDOMElementWidth=ReactDOM.findDOMNode（this.getBoundingClientRect（）.width
var chartHeight=集装箱码头宽度/2；
这是一张绘图图（数据、集装箱码头宽度、图表高度）；
}
绘图图（数据、图表宽度、图表高度）{
var-margin={顶部：30，右侧：20，底部：30，左侧：50}；
变量宽度=图表宽度-margin.left-margin.right；
变量高度=图表高度-margin.top-margin.bottom；
var parseDate=d3.timeParse（“%d-%b-%y”）；
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var xAxis=d3.axisBottom（）.scale（x）
.蜱（2）；
var yAxis=d3.axisLeft（）.scale（y）
.蜱（2）；
var valueline=d3.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.close）；
});
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 close=+d.close；
});
//缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.close；
})]);
svg.append（“path”）.attr（'class'，'linechart'）//添加valueline路径。
.attr（“d”，valueline（数据））；
svg.append（“g”）//添加X轴
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）//添加Y轴
.attr（“类”、“y轴”）
.呼叫（yAxis）；
}
render（）{
返回；
}
}
函数getRandomData（）{
返回[{
日期：“2012年5月1日”，
关闭：Math.random（）*90
}, {
日期：“2012年4月30日”，
关闭：Math.random（）*90
}, {
日期：“2012年4月27日”，
关闭：Math.random（）*90
}, {
日期：“2012年4月26日”，
关闭：Math.random（）*90
}, {
日期：“2012年4月25日”，
关闭：Math.random（）*90
}];
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
。折线图{
填充：无；
笔画：蓝色
}
.图表容器{
显示器：flex；
}
.图表包装器{
宽度：100%；
}