Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Duplicate SVG path elements in Area graph #26

Open
orthonym opened this issue Mar 23, 2019 · 0 comments
Open

Duplicate SVG path elements in Area graph #26

orthonym opened this issue Mar 23, 2019 · 0 comments

Comments

@orthonym
Copy link

orthonym commented Mar 23, 2019

When creating the following area chart

note, use of hide-line has no bearing on the issue, used only to reduce svg output in this example

<la-cartesian :data="values">
    <la-area hide-line prop="pv"/>
</la-cartesian>

Where values is an array of objects:

data: () => ({
    values: [
        { name: 'Page A', pv: 2000 },
        { name: 'Page B', pv: 3000 },
        { name: 'Page C', pv: 1200 }
    ]
})

The SVG produced contains duplicate Path elements. Specifically, duplicate elements === values.length.

<svg width="600" height="300" viewBox="0 0 600 300">
    <g>
        <defs>
            <linearGradient id="la-area-2-0">
                <stop stop-color="#3fb1e3" stop-opacity="0.5"></stop>
            </linearGradient>
        </defs>
        <g>
            <path d="M8,165.77..." fill="url(#la-area-2-0)" style="..."></path>
            <!-- duplicate path elements === values.length -->
            <path d="M8,165.77..." fill="url(#la-area-2-0)" style="..."></path>
            <path d="M8,165.77..." fill="url(#la-area-2-0)" style="..."></path>
            <path d="M8,165.77..." fill="url(#la-area-2-0)" style="..."></path>
        </g>
    </g>
</svg>

Full sample here https://jsfiddle.net/3dhs87co/

  • In my case, the path elements have an opacity applied to them. Since the path elements overlap, the path elements are effectively opaque.
  • The DOM grows rapidly with larger arrays.

Expected Behavior

A single path element generated for values.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant