更改 MUI x 图表中 MarkElement 的大小

Question

我想通过

slots.mark

属性注入自定义 MarkElement。如何更改 MarkElement 的大小？

const slotsMark = (props: MarkElementProps) => {
    return (
        <MarkElement {...props}/>
    )
}

我设法通过

color

属性更改颜色，但我没有找到尺寸的属性。

Answer 1

MarkElement

中的默认

mui-x

组件是SVG路径：

https://github.com/mui/mui-x/blob/c7795d90ce0c300415cf76b136a1496754683309/packages/x-charts/src/LineChart/MarkElement.tsx#L121

这意味着没有直接的方法来改变它的大小；整个形状都编码在其

d

属性中。如果您点击我提供的链接，您将看到该属性的值是通过

d3

的

symbol

函数生成的（此处导入为

d3Symbol

）；您可以阅读其文档here，它应该可以帮助您构建自定义标记，您可以使用

slots

API 将其提供给图表。据我所知，没有其他方法可以做到这一点。