QingWei-Li / laue

🖖📈 Modern charts for Vue 2.0
https://laue.js.org
MIT License
262 stars 34 forks source link

Duplicate SVG path elements in Area graph #26

Open orthonym opened 5 years ago

orthonym commented 5 years ago

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/

Expected Behavior

A single path element generated for values.