基础的折线图练习 / lengduan

lengduan

Workspace

Published

Edited

Aug 18, 2022

# 基础的折线图练习

fruits = [

{name: "🍊", count: 21},

{name: "🍇", count: 13},

{name: "🍏", count: 8},

{name: "🍌", count: 5},

{name: "🍐", count: 3},

{name: "🍋", count: 2},

{name: "🍎", count: 1},

{name: "🍉", count: 1}

]

x = d3.scaleBand().domain(fruits.map(d => d.name)).range([margin.left, width - margin.right]).padding(0.1)

y = d3.scaleLinear().domain([0, d3.max(fruits.map(d => d.count))]).range([height - margin.bottom, margin.top])

line = d3.line().x(d => x(d.name)).y(d => y(d.count))

htl.html`<svg viewBox="0 0 ${width} ${height}">

</g>

${d3.select(htl.svg`<g>`).call(axisBottom).node()}

${d3.select(htl.svg`<g>`).call(axisLeft).node()}

</svg>`

area = d3.area()

.x(d => x(d.name))

.y0(y(0))

.y1(d => y(d.count))

htl.html`<svg viewBox="0 0 ${width} ${height}">

// 上下边线

// 左右边线

<path d="${d3.line().x(() => x(fruits[0].name)).y(d => y(d.count))([{count: 0}, fruits[0]])}" fill="none" stroke="red" stroke-width="2" />

<path d="${d3.line().x(() => x(fruits[fruits.length - 1].name)).y(d => y(d.count))([{count: 0}, fruits[fruits.length - 1]])}" fill="none" stroke="red" stroke-width="2" />

</g>

${d3.select(htl.svg`<g>`).call(axisBottom).node()}

${d3.select(htl.svg`<g>`).call(axisLeft).node()}

</svg>`

axisBottom = g => g.attr('transform', `translate(0, ${height - margin.bottom})`).call(d3.axisBottom(x))

axisLeft = g => g.attr('transform', `translate(${margin.left}, 0)`).call(d3.axisLeft(y))

width = 600

height = 300

margin = ({ top: 20, right: 20, bottom: 20, left: 20 })

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more