Круговая диаграмма D3 исчезает с карты

Я начал с примера приложения Map по адресу: http://bl.ocks.org/d3noob/raw/5193723/

Я хочу разместить пользовательскую круговую диаграмму, как показано на рисунке ниже. Я создал его, добавив фрагмент кода сразу после создания кругов.

Фрагмент круговой диаграммы:

        var r=10;
        var p = Math.PI*2;

        var arc = d3.svg.arc()
                .innerRadius(r-3)
                .outerRadius(r)
                .startAngle(0)
                .endAngle(p* d.value1);
        var arc2 = d3.svg.arc()
                .innerRadius(r-7)
                .outerRadius(r-4)
                .startAngle(0)
                .endAngle(p* d.value2);

        g.append("path")
                .attr("d", arc)
                .attr("fill", "red")
                .attr("transform", "translate(400,500)");
        g.append("path")
                .attr("d", arc2)
                .attr("fill", "orange")
                .attr("transform", "translate(400,500)");

Получается красиво, как показано на картинке ниже рядом с Таиландом:введите описание изображения здесь

Проблема

  1. Когда я масштабирую или перемещаю карту, круговая диаграмма исчезает, но круги остаются нетронутыми. Может ли кто-нибудь помочь мне понять это?
  2. Можно заметить очень грубый способ построения дуг. Ожидается, что круговая диаграмма будет построена для каждого города. Я ищу более чистый способ, как рисуются круги.

javascript d3.js topojson
person Mohitt    schedule 09.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Код, который запускается, когда происходит масштабирование

    g.selectAll("path")  
        .attr("d", path.projection(projection));

выбирает все пути и изменяет их атрибут "d". Поскольку он «обычно» просто ищет pathss, он также захватывает созданные вами пути пончиков и изменяет их (возможно, устанавливая для них пустые строки или NaNs).

Вы можете исправить это, убрав пончики из одних и тех же g геопутей, чтобы они не выделялись. ИЛИ вы можете сделать свой селектор "path" более конкретным, добавив некоторый класс (например, "geo") ко всем геопутям и используя этот класс всякий раз, когда вы их выбираете (например, g.selectAll("path.geo")).

person meetamit    schedule 09.12.2014
comment
Вот пример реализации второй идеи @meetamit. - person Mark; 10.12.2014
comment
Спасибо @Mark за то, что собрал это вместе! - person meetamit; 10.12.2014