Попытки изменить Вороную карту в D3JS

Question

Я пытаюсь изменить этот пример D3 для использования с моим набором данными

http://mbostock.github.io/d3/talk/20111116/airports.html

Я думаю, что моя проблема создает массив координат для вычисления Вороного, но на данный момент я не уверен.

Я получаю ошибку Uncaught TypeError: Cannot read property '0' of undefined, указывающую на строку, где я вызываю массив. Код будет, пожалуйста, смотрите здесь

http://cds.library.brown.edu/projects/mapping-genres/symbol-maps/brown-voronoi-map.html

карта отображает только штраф, но и точки данных, переключатель и Вороной линии не появляется (я не пытаюсь показать линии между данными точек, чтобы код был удален).

Любые мысли или предложения были бы наиболее ценными. Большое спасибо!

Answer 1

Здесь есть несколько мелких вещей, которые можно легко отсортировать, но для некоторых потребуется немного работы. Во-первых, вы используете новую версию d3 (v3), а пример, который вы пытаетесь реплицировать, - это более старая версия. Существовали значительные изменения между версиями на стороне отображения вещей. Поэтому вы можете либо использовать старую версию d3 (v2 будет работать, я думаю), либо исследовать изменения.

Uncaught TypeError: Cannot read property '0' of undefined ошибка возникает, потому что d3.geom.voronoi(positions) линия производит NaN. Я не на 100% уверен, почему, но вы можете просто отфильтровать их, чтобы получить временное исправление. Простой фильтр будет что-то вроде:

g.append("svg:path") 
     .attr("class", "cell") 
     .attr("d", function(d, i) { 
     if (polygons[i][0][0]) { 
      return "M" + polygons[i].join("L") + "Z"; 
      } 
     }) 

с, если оно истинно, когда не ложное значение (NULL, NaN и т.д.) в первом элементе многоугольника. Обратите внимание, что это временное исправление, когда вы исследуете, почему вы получаете NaN, и это не приведет к созданию правильных полигонов ворона.

Исправление для точек данных очень просто, вам просто нужно установить радиус на что-то большее, чем 0, например 10 (хотя я предполагаю, что вы можете масштабировать точки до свойства ваших данных, таких как TotalPublished) , Например увидеть последнюю строку:

circles.selectAll("circle") 
     .data(locations.rows 
     .sort(function(a, b) { return b.TotalPublished - a.TotalPublished; })) 
    .enter().append("svg:circle") 
     .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }) 
     .attr("r", 10); 

радио-кнопка (или флажок) не отображается, как это не генерируется JavaScript (хотя это может быть). В этом примере вы обращаетесь к его вырабатываемой в HTML в этом фрагменте:

<div style="position:absolute;bottom:0;font-size:18px;"> 
    <input type="checkbox" id="voronoi"> <label for="voronoi">show Voronoi</label> 
</div> 

После того, как вы работали через это вам нужно, чтобы получить Вороного линии работы. Я думаю, что с вашим кодом, так как строки voronoi не будут отображаться, поскольку флажок не установлен. Поэтому вы можете прокомментировать эти строки и посмотреть, что произойдет. Быстрый совет с путями заключается в том, что если вы хотите просто показать строки, вам нужно установить стиль заливки на ничто и штрих на любой цвет, который вы хотите. Если вы не установите заливку в none, вы просто получите черный экран.