Estoy trabajando en una visualización que cambia la fuente de datos según la entrada del usuario a través de un elemento de entrada. El elemento de entrada es un tipo de rango y tiene valores mínimos y máximos correspondientes a los años 1946-2020. Tengo archivos CSV para cada año y quiero cambiar la fuente de datos según el valor del rango de entrada. Ya tengo un detector de eventos para que el elemento de entrada actualice el texto adjunto al SVG, pero lo que no sé cómo hacer es cambiar también el archivo CSV.

var margin = {
    top: 0,
    right: 40,
    bottom: 30,
    left: 20
  },
  width = 1260 - margin.left - margin.right,
  height = 630 - margin.top - margin.bottom;

var x = d3.scale
  .linear()
  .domain([0, 20])
  .range([0, width]);

var y = d3.scale
  .linear()
  .domain([0, 15])
  .range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(20,610)")
  .call(xAxis.ticks(20).tickSize(0).tickPadding(10))
  .append("text")
  .attr("id", "year")
  .attr("x", width / 2)
  .attr("y", -height / 2)
  .style("text-anchor", "middle")
  .text("1946");

d3.csv("championships/1946.csv", function(error, data) {
  svg.selectAll(".logo")
    .data(data)
    .enter()
    .append("image")
    .attr("xlink:href", function(d) {
      return d.logo;
    })
    .attr("x", function(d) {
      return x(d.championships);
    })
    .attr("y", function(d) {
      return y(d.stack);
    })
    .attr("width", "40")
    .attr("height", "40");
});

d3.select("#slider").on("input", function() {
  update(+this.value);
});

function update(slider) {
  d3.select("#year").text(slider);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<div id="container">
  <input id="slider" type="range" min="1946" max="2020" step="1" value="1946">
</div>
1
zach4618 16 oct. 2020 a las 21:00

1 respuesta

La mejor respuesta

Solo asegúrese de llamar a la función d3.csv desde dentro de la función update() y use el valor slider para construir la ruta del archivo. En StackOverflow, esto no funciona, porque no tengo sus archivos, pero puede ver que se realizan las llamadas. Simplemente fallan.

var margin = {
    top: 0,
    right: 40,
    bottom: 30,
    left: 20
  },
  width = 1260 - margin.left - margin.right,
  height = 630 - margin.top - margin.bottom;

var x = d3.scale
  .linear()
  .domain([0, 20])
  .range([0, width]);

var y = d3.scale
  .linear()
  .domain([0, 15])
  .range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(20,610)")
  .call(xAxis.ticks(20).tickSize(0).tickPadding(10))
  .append("text")
  .attr("id", "year")
  .attr("x", width / 2)
  .attr("y", -height / 2)
  .style("text-anchor", "middle")
  .text("1946");

d3.select("#slider").on("input", function() {
  update(+this.value);
});

function update(slider) {
  d3.select("#year").text(slider);

  d3.csv("championships/" + slider + ".csv", function(error, data) {
    console.log("Read data for", slider);
    if (error !== undefined) return;
    svg.selectAll(".logo")
      .data(data)
      .enter()
      .append("image")
      .attr("xlink:href", function(d) {
        return d.logo;
      })
      .attr("x", function(d) {
        return x(d.championships);
      })
      .attr("y", function(d) {
        return y(d.stack);
      })
      .attr("width", "40")
      .attr("height", "40");
  });

};
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<div id="container">
  <input id="slider" type="range" min="1946" max="2020" step="1" value="1946">
</div>
1
Ruben Helsloot 16 oct. 2020 a las 19:04