javascript - examples - maps with d3 js

Suavizar arcos/puntos de trazado en D3.js/GeoJSON/TopoJSON/Shapefile(en algún punto del camino)

Question

Estuve buscando por un tiempo una respuesta a esto, y no he podido descifrarlo.

• En última instancia, estoy creando un archivo TopoJSON a partir de datos basados ​​en la cuadrícula (archivos GRIB).
• Puedo fácilmente interpolar los datos a una cuadrícula de resolución más fina para que los puntos de la trama aparezcan más suaves cuando se reduce el zoom, pero cuando se amplía, es inevitable ver los puntos de cuadrícula.
• También he estudiado la simplificación, que ayuda un poco pero no es muy suave.
• Estoy usando D3 para renderizar los datos.
• ¿Es esto algo que se puede hacer desde el principio o debería / puede hacerse en los datos TopoJSON sin procesar?
• Básicamente, no quiero que puedas decir que es una cuadrícula, incluso si aumentas el 10,000%.
• Aquí hay un ejemplo de lo que estoy buscando:

Answer 1

¿Es esto algo que se puede hacer desde el principio o debería / puede hacerse en los datos TopoJSON sin procesar?

Esto es algo que debe hacerse en el frente. Si tuviera que suavizar los datos antes de escribirlos en el archivo JSON, el archivo sería innecesariamente grande.

Answer 2

Quizás d3 line.interpolate () es lo que estás buscando?

Más información: http://www.d3noob.org/2013/01/smoothing-out-lines-in-d3js.html

Answer 3

Si está utilizando D3.js y está trabajando con líneas, la función integrada interpolate () es el camino a seguir.

Aquí hay un ejemplo de trabajo de line.interpolate () de D3 usando suavizado "cardinal":

http://codepen.io/gracefulcode/pen/doPmOK

Aquí está el código:

var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 600 - margin.left - margin.right,
  height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
  .interpolate("cardinal")
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.close);
  });

// Adds the svg canvas
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 + ")");

// Get the data
d3.json(''https://api.myjson.com/bins/175jl'', function(error, data) {
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
  });
  // Scale the range of the data
  // Starting with a basic graph 14
  x.domain(d3.extent(data, function(d) {
    return d.date;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.close;
  })]);
  // Add the valueline path.
  svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));
  // Add the X Axis
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
  // Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
});