d3.js 如何在单击条形图时显示新元素

plicqrtu 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(178)

我使用重新绘制图表实现了条形图。我希望在单击条形图时在图表区域外显示一个新的div元素，该元素将显示与条形图相关的附加信息。我添加了一个函数，该函数将返回需要在onClick事件中显示的div元素。

<BarChart width={1130} height={450} data={data}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="endTime" tickFormatter={time => moment.unix(time).format('DD MMM')} />
                    <YAxis />
                    <Tooltip content={this.renderTooltip} />
                    <Legend verticalAlign="top" height={36} />
                    <Brush dataKey='endTime' height={30} stroke="#1984CD" tickFormatter={time => moment.unix(time).format('DD MMM')} onChange={this.handleBrushChange.bind(this)} />
                    <Bar barSize={20} name="process duration" dataKey="duration" fill="#1984CD" onClick={this.onBarClick.bind(this)} />
                </BarChart>

onBarClick(bar) {
        console.log("bar clicked", bar);
        return (
            <div className='infoPanel'>
                <Box colorIndex="light-1" pad="small" margin="small">
                    <p>StartTime: {moment.unix(bar.startTime).format('MMM Do YYYY, h:mm:ss')}</p>
                    <p>EndTime: {moment.unix(bar.endTime).format('MMM Do YYYY, h:mm:ss')}</p>
                    <p>Event:  <span> {bar.aname}</span> {bar.evtime1}</p>
                    <p>Event: <span> {bar.aname2}</span>  {bar.evttime2}</p>
                    <p>Event: {bar.aname3} at {bar.evtime3}</p>
                </Box>
            </div>
        );
    }

.infoPanel {
  margin-top: 5em;
  color: #666;
  background-color: aquamarine;
}

函数被调用并正确运行，但我在任何地方都看不到div元素。是否不可能在不添加新组件的情况下添加新的div元素？

d3.js

来源：https://stackoverflow.com/questions/52748925/how-to-display-a-new-element-onclick-of-a-bar-recharts

2条答案

按热度按时间

aoyhnmkz1#

在你的情况下，你返回了组件，但没有在任何地方呈现它。你可以做的是在DOM的某个地方有条件地呈现，并使用一个状态来显示或不显示你正在呈现的内容。
例如，您可以使用以下两种方法：

onBarClick(bar) {
  this.setState({selectedBar : bar});
}

 renderSelectedBar(bar) {
    return (
        <div className='infoPanel'>
            <Box colorIndex="light-1" pad="small" margin="small">
                <p>StartTime: {moment.unix(bar.startTime).format('MMM Do YYYY, h:mm:ss')}</p>
                <p>EndTime: {moment.unix(bar.endTime).format('MMM Do YYYY, h:mm:ss')}</p>
                <p>Event:  <span> {bar.aname}</span> {bar.evtime1}</p>
                <p>Event: <span> {bar.aname2}</span>  {bar.evttime2}</p>
                <p>Event: {bar.aname3} at {bar.evtime3}</p>
            </Box>
        </div>
    );
}

然后在渲染函数的某个地方：

{ this.state.selectedBar ? this.renderSelectedBar(this.state.selectedBar) : undefined }

赞(0）回复(0）举报 2022-11-12

vdgimpew2#

我在谷歌上找到了这个答案。作者的学分不是我的。

const { 
    ResponsiveContainer, RadialBarChart, RadialBar, Legend, Tooltip
 } = Recharts;

const data = [
    {fill:"#008744", name:"A", uv:"5870"},
  {fill:"#d0ed57", name:"B", uv:"1"},
];

function demoOnClick(e) {
    alert(e.name);
}

const SimpleBarChart = React.createClass({
    render () {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <RadialBarChart width={500} height={300} cx={150} cy={150} innerRadius={20} outerRadius={140} barSize={10} data={data} onClick={demoOnClick} >
          <Legend align="left" verticalAlign="top" />
          <RadialBar className="clickable" minAngle={15} label background clockWise={true} dataKey="uv" />
          <Tooltip />
        </RadialBarChart>
      </ResponsiveContainer>
    );
  }
})

ReactDOM.render(
  <SimpleBarChart />,
  document.getElementById('container')
);

https://jsfiddle.net/ydycdLpx/5/

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js 如何在单击条形图时显示新元素

2条答案

相关问题

热门标签

最新问答