Почему функция сортировки не работает на графике d3 - PullRequest
0 голосов
/ 13 октября 2019

Я новичок в 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()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...