Javascript “如何始终保持所有活动点”；主动的；而不是将鼠标悬停在数据点上（recharts）

我已经安装了npm的包“recharts”（最新版本1.5.0），并正确加载了react项目的数据

数据线和图表始终处于活动状态。我需要所有“活动点”始终处于活动状态，而不是仅当鼠标悬停在数据点上时才处于活动状态

   <LineChart
        width={240}
        height={180}
        data={data}
        margin={{top: 15, right: 10, left: 10}}
      >
         <CartesianGrid horizontal={false} />
         <XAxis
          dataKey="x"
          stroke="rgba(0,0,0,0.4)"
          strokeWidth=".4"
          scale="time"
          type="number"
          domain={['auto', 'auto']}
          tick={{fontSize: 12}}
          tickFormatter = {(unixTime) => moment(unixTime).format('MMM D')}
         />
         <YAxis hide={true} />
         <Tooltip content={<CustomTooltip/>}/>
         <Line
          connectNulls={false}
          type="linear"
          dataKey="pv"
          stroke="#3F99F7"
          strokeWidth="3"
          activeDot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 3, r: 11, className: "boxShadow" }}
          dot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 2, r: 7, className: "boxShadow" }}
         />
      </LineChart>

矩（unixTime）.format（'mmmd'）}
/>

不悬停在数据点上：

将鼠标悬停在数据点上：

---

这看起来像你想要的（紫色线）：

const{LineChart，Line，XAxis，YAxis，CartesianGrid，Tooltip，Legend}=Recharts；
常数数据=[
{名称：“A页”，紫外线：4000，紫外线：2400，金额：2400}，
{名称：'第B页'，紫外线：3000，光伏：1398，金额：2210}，
{名称：“C页”，uv:2000，pv:9800，金额：2290}，
{名称：'第D页'，紫外线：2780，pv:3908，金额：2000}，
{姓名：'Page E'，紫外线：1890，紫外线：4800，金额：2181}，
{名称：'第F页'，紫外线：2390，光伏：3800，金额：2500}，
{名称：'第G页'，紫外线：3490，光伏：4300，金额：2100}，
];
const SimpleLineChart=React.createClass({
渲染（）{
返回(
);
}
})
ReactDOM.render(
,
document.getElementById（'容器'）
);
正文{
保证金：0；
}
#容器{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
填充：10px；
宽度：800px；
高度：800px；
背景色：#fff；
}

这一点很好，但我不知道在改变“activeDot”的激活方式时，其他任何东西会如何影响包。@AliMansour我知道SSR和响应容器会影响点的呈现。我不明白你的答案。我是否需要比较代码以了解差异？你能解释一下你做了什么以及它是如何解决问题的吗？