我是react的新手,尝试在react应用程序中使用Victory来制作简单的散点图。我正在处理这些例子,无法使散点图的交互式部分发挥作用。
这是我的App.js
import ReactDOM from 'react-dom';
import { VictoryScatter } from 'victory';
import {sampleData} from './data_holder'
class App extends React.Component {
render() {
return (
<div>
<h3>Click Me</h3>
<VictoryScatter
style={{ data: { fill: "#c43a31" } }}
size={9}
labels={() => null}
events={[{
target: "data",
eventHandlers: {
onClick: () => {
return [
{
target: "data",
mutation: (props) => {
const fill = props.style && props.style.fill;
return fill === "black" ? null : { style: { fill: "black" } };
}
}, {
target: "labels",
mutation: (props) => {
return props.text === "clicked" ?
null : { text: "clicked" };
}
}
];
}
}
}]}
data={sampleData}
/>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
export default App
保存在.data_holder中的示例数据如下:
export const sampleData=[
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 7 }
]
onClick事件正在发生(当我在onClick中添加日志语句时,它会清楚地显示出来(,但填充颜色没有更新。非常感谢您的帮助。
使用onPressIn
代替onClick
即可。
问题似乎是由react中的组件启用严格模式引起的。我不确定为什么,但一旦我从react中删除了严格模式,情节就可以更新了。一旦我知道了互动的细节,我会在这里更新。