如何使用 d3.js 在条形图中添加升序-降序排序按钮？

Question

我想弄清楚如何在条形图中添加交互功能。

现在我对使用按钮进行升序和降序排序的单击操作的程序功能感到困惑。

这是我的代码：

const width = 800
const height = 400
const margin = {
    top: 40, 
    bottom: 60, 
    left: 40, 
    right: 10
}
const svg = d3.select("div#chart").append("svg").attr("width", width).attr("height", height)
const elementGroup = svg.append("g").attr("id", "elementGroup").attr("transform", `translate(${margin.left}, ${margin.top})`)
const axisGroup = svg.append("g").attr("id", "axisGroup")
const xAxisGroup = axisGroup.append("g").attr("id", "xAxisGroup").attr("transform", `translate(${margin.left}, ${height - margin.bottom})`)
const yAxisGroup = axisGroup.append("g").attr("id", "yAxisGroup").attr("transform", `translate(${margin.left}, ${margin.top})`)

const x = d3.scaleBand().range([0, width - margin.left - margin.right]).padding(0.1)
const y = d3.scaleLinear().range([height - margin.bottom - margin.top, 0])

const xAxis = d3.axisBottom().scale(x)
const yAxis = d3.axisLeft().scale(y).ticks(5)

d3.csv("WorldCup.csv").then(data => {

  let nest = d3.nest()
  .key(d => d.Winner)
  .entries(data)
nest.map(d => d.values = d.values.length)
console.log(nest)

    
    x.domain(nest.map(d => d.key))
    y.domain([0, d3.max(nest.map(d => d.values))])

    xAxisGroup.call(xAxis)
    yAxisGroup.call(yAxis)

        //Asceding sort

        function sortAscending() {nest.sort((a, b) => d3.ascending(a.values, b.values))
          
          let xLabel = elementGroup.append("text").text("Countries")
          .attr("transform", `translate(${width - margin.right - 30}, ${height - margin.bottom})`)
          .attr("text-anchor", "end").attr("font-weight", 700)
      
          let yLabel = elementGroup.append("text").text("Cups per country")
          .attr("transform", `translate(${-20}, ${-10})`).attr("font-weight", 700)
      
          let elements = elementGroup.selectAll("rect").data(nest)
          elements.enter().append("rect")
              .attr("class", "bar")
              .attr("x", d => x(d.key))
              .attr("width", x.bandwidth())
              .attr("height", d => height - margin.top - margin.bottom - y(d.values))
              .attr("y", d => y(d.values))
        }
        d3.select("#Ascending").on("click", sortAscending)

       //Descending sort

        function sortDescending() {nest.sort((a, b) => d3.descending(a.values, b.values))

          let xLabel = elementGroup.append("text").text("Countries")
          .attr("transform", `translate(${width - margin.right - 30}, ${height - margin.bottom})`)
          .attr("text-anchor", "end").attr("font-weight", 700)
      
          let yLabel = elementGroup.append("text").text("Cups per country")
          .attr("transform", `translate(${-20}, ${-10})`).attr("font-weight", 700)
      
          let elements = elementGroup.selectAll("rect").data(nest)
          elements.enter().append("rect")
              .attr("class", "bar")
              .attr("x", d => x(d.key))
              .attr("width", x.bandwidth())
              .attr("height", d => height - margin.top - margin.bottom - y(d.values))
              .attr("y", d => y(d.values))
        }
        d3.select("#Ascending").on("click", sortDescending)


      })

我尝试了不同的例子。

此刻，我只是理解它是关于配置一个function，然后通过'on'将功能与按钮联系起来。

Answer 1

你已经接近了，但是你必须将第一次绘制plot的代码与数据排序后需要更新它的代码分开。 根据您的代码，一个可行的框架是这个

 const height = 400, width = 600; const margin = { top: 40, bottom: 60, left: 40, right: 10 }; const svg = d3.select("div#chart").append("svg").attr("width", width).attr("height", height) const elementGroup = svg.append("g").attr("id", "elementGroup").attr("transform", `translate(${margin.left}, ${margin.top})`) const axisGroup = svg.append("g").attr("id", "axisGroup") const xAxisGroup = axisGroup.append("g").attr("id", "xAxisGroup").attr("transform", `translate(${margin.left}, ${height - margin.bottom})`) const yAxisGroup = axisGroup.append("g").attr("id", "yAxisGroup").attr("transform", `translate(${margin.left}, ${margin.top})`) const x = d3.scaleBand().range([0, width - margin.left - margin.right]).padding(0.1) const y = d3.scaleLinear().range([height - margin.top - margin.bottom, 0]) const xAxis = d3.axisBottom().scale(x) const yAxis = d3.axisLeft().scale(y).ticks(5) function drawBarPlot(nest){ x.domain(nest.map(d => d.key)) y.domain([0, d3.max(nest.map(d => d.values))]) xAxisGroup.call(xAxis) yAxisGroup.call(yAxis) elementGroup.append("text").text("Countries").attr("transform", `translate(${width - margin.right - 30}, ${height - margin.bottom})`).attr("text-anchor", "end").attr("font-weight", 700); elementGroup.append("text").text("Cups per country").attr("transform", `translate(${-20}, ${-10})`).attr("font-weight", 700); elementGroup.selectAll("rect").data(nest).enter().append("rect").attr("class", "bar").attr("x", d => x(d.key)).attr("width", x.bandwidth()).attr("height", d => height - margin.top - margin.bottom - y(d.values)).attr("y", d => y(d.values)); } function updateBarPlot(nest){ x.domain(nest.map(d => d.key)); xAxisGroup.call(xAxis); elementGroup.selectAll("rect").data(nest).call(update => update.attr("height", d => height - margin.top - margin.bottom - y(d.values)).attr("y", d => y(d.values))); } //Ascending sort function sortAscending(nest) { nest.sort((a, b) => d3.ascending(a.values, b.values)); updateBarPlot(nest); } function sortDescending(nest) { nest.sort((a, b) => d3.descending(a.values, b.values)); updateBarPlot(nest); } //d3.csv("WorldCup.csv").then(data => { new Promise(resolve => resolve(d3.csvParse("Year,Winner\n" + "1930,Uruguay\n" + "1934,Italy\n" + "1938,Italy\n" + "1950,Uruguay\n" + "1954,Germany\n" + "1958,Brazil\n" + "1962,Brazil\n" + "1966,England\n" + "1970,Brazil\n" + "1974,Germany\n" + "1978,Argentina\n" + "1982,Italy\n" + "1986,Argentina\n" + "1990,Germany\n" + "1994,Brazil\n" + "1998,France\n" + "2002,Brazil\n" + "2006,Italy\n" + "2010,Spain\n" + "2014,Germany\n" + "2018,France\n" + "2022,Argentina\n"))).then(data => { let nest = d3.nest().key(d => d.Winner).entries(data) nest.map(d => d.values = d.values.length) drawBarPlot(nest); d3.select("#Ascending").on("click", ()=>sortAscending(nest)); d3.select("#Descending").on("click", ()=>sortDescending(nest)); });

 <script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://d3js.org/d3-collection.v1.min.js"></script> <div id="chart"></div> <button id="Ascending">Ascending</button><button id="Descending">Descending</button>