Сглаживание дуг/точек сюжета в D3.js/GeoJSON/TopoJSON/Shapefile (где-то в пути)

Question

Я искал время, чтобы ответить на этот вопрос, и я не смог понять это.

• В конечном итоге я создаю файл TopoJSON из данных на основе сетки (файлы GRIB).
• Я могу довольно легко интерполировать данные до сетки с более тонким разрешением, поэтому на графиках появляются более плавный, если увеличить масштаб, но при увеличении масштаба неизбежно увидеть блокированные точки сетки.
• Я также рассмотрел упрощение, которое помогает немного, но это не совсем сглаживание.
• Я использую D3 для визуализации данных.
• Это что-то, что можно сделать на переднем конце или должно/может быть сделано в необработанных данных TopoJSON?
• По сути, я не хочу, чтобы вы могли сказать, что это сетка, даже если вы увеличиваете 10 000%.
• Вот пример того, что я после:

Answer 1

ли это что-то, что можно сделать на лицевой стороне, или должно/должно быть сделано в сыром виде Данные TopoJSON?

Это то, что должно быть сделано на переднем конце. Если вы должны были сгладить данные до того, как вы написали их в файл JSON, файл будет бесполезным.

Answer 2

Может быть d3 line.interpolate() это то, что вы ищете?

Подробнее: http://www.d3noob.org/2013/01/smoothing-out-lines-in-d3js.html

Answer 3

Если вы используете D3.js, и вы работаете с линиями, функция встроенной интерполировать() является путь.

Вот рабочий пример line.interpolate D3 (в) с использованием "Кардинал" сглаживающий:

Вот код:

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); 
});