Я новичок в d3 и пытаюсь создать диаграмму Лолли, как в этом примере (https://observablehq.com/@hydrosquall/d3-tutorial-interactivity-animated-transitions) с кнопкой "сортировка". В моем примере данных я хочу отсортировать названия песен (xось) на значении "танцевальности" (ось Y).
Я успешно создал статическую диаграмму. Но когда я пытаюсь обновить диаграмму с помощью кнопки сортировки, диаграмма просто остается прежней, а неСортировка. В консоли не отображается сообщение об ошибке. Я не знаю, что я сделал неправильно, это кажется очень простым, но я смотрел на него некоторое время и не могу понять.
Любая помощь будеточень ценится!
async function draw_lolly() {
// 1. Read in data
var data = await d3.csv('./data.csv')
var dataset = data.filter(function(d,i){ return i<15})
console.log(dataset)
// 2. Set dimensions
let dimensions = {
width: window.innerWidth*0.9,
height: 500,
margin: {
top: 50,
right: 50,
left: 100,
bottom: 50
}
}
dimensions.boundedWidth = dimensions.width
- dimensions.margin.left
- dimensions.margin.right
dimensions.boundedHeight = dimensions.height
- dimensions.margin.top
- dimensions.margin.bottom
// 3. Draw canvas
const wrapper = d3.select("#wrapper")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height)
const bounds = wrapper.append("g")
.style("transform", `translate(${
dimensions.margin.left
}px, ${
dimensions.margin.top
}px)`)
const draw_chart = dataset => {
const xAccessor = d => d.song_title
const yAccessor = d => d.danceability
const catAccessor = d => d.mode
console.log(dataset[1].song_title)
// Create scales
const xScale = d3.scaleBand()
.rangeRound([0, dimensions.boundedWidth])
.padding(0.1)
.domain(dataset.map(d => xAccessor(d)))
const colorScale = d3.scaleOrdinal()
.domain(dataset.map(d => catAccessor(d)))
.range(["#009933" , "#0000FF"]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, yAccessor)])
.range([dimensions.boundedHeight, 0])
.nice()
// Draw data
const lollybody = bounds.selectAll("g")
.data(dataset)
.enter()
.append("g")
lollybody.exit().remove()
const lines = lollybody.append("line")
.attr("x1", d => xScale(xAccessor(d)))
.attr("y1", d => yScale(yAccessor(d)))
.attr("x2", d => xScale(xAccessor(d)))
.attr("y2", dimensions.boundedHeight)
.attr("stroke", d => colorScale(catAccessor(d)))
.on("mouseover", function() {
d3.select(this).style("stroke", "lightgrey")
})
.on("mouseout", function() {
d3.select(this).style("stroke", d => colorScale(catAccessor(d)))
})
const circles = lollybody.append("circle")
.attr("r", 5)
.attr("cx", d => xScale(xAccessor(d)))
.attr("cy", d => yScale(yAccessor(d)))
.attr("fill", d => colorScale(catAccessor(d)))
.on("mouseover", function() {
d3.select(this).style("fill", "lightgrey")
})
.on("mouseout", function() {
d3.select(this).style("fill", d => colorScale(catAccessor(d)))
})
}
// Draw axis
const xAxisText = bounds.append("text")
.attr("x", dimensions.boundedWidth / 2)
.attr("y", dimensions.boundedHeight + dimensions.margin.bottom - 10)
.text("songs on Spotify")
// Draw button
const button = d3.select("body")
.append("button")
.text("Sort")
draw_chart(dataset)
button.node().addEventListener("click", onClick)
function onClick() {
dataset = dataset.sort(function(a, b) {
return d3.descending(a.danceability, b.danceability)
})
draw_chart(dataset)
}
}
draw_lolly()