Вопросы Теги

атрибуты x и y узлов, потерянные после паттерна enter-update-exit

Для мобильного приложения я использую только VH и VW 


  
Title

  
Content

  
Footer




.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Demo - https://jsfiddle.net/u763ck92/

3
задан Gerardo Furtado 16 January 2019 в 05:22
поделиться

1 ответ

Атрибуты есть, это не проблема. Проблема заключается просто в определении circles внутри функции ticked.

Например, если вы сделаете это: 

function ticked() {
    g.selectAll("circle").attr("cx", function(d) {
            return d.x
        })
        .attr("cy", function(d) {
            return d.y
        })
};

Это будет работать. Вот ваш раздвоенный плункер: https://plnkr.co/edit/szhg8eUYQUMxHcLmBF8N?p=preview

Однако здесь идиоматическим решением является слияние выборов внутри функция sharksByFamilyRev: 

circles = circles.enter().append("circle").attr("class", "sharks")
    .attr("fill", function(d) {
        return colorScale(d.family)
    }).attr("r", function(d) {
        return radiusScale(+d.size);
    })
    .attr('stroke', '')
    .merge(circles);

Вот плункер с этим изменением: https://plnkr.co/edit/pBPJUhEKQIPnB0ammGDd?p=preview

PS: у вас есть другие проблемы в этом коде, которые не связаны с настоящим вопросом (например, смешивание jQuery и D3, повторение кода и т. Д.).

0
ответ дан Gerardo Furtado 16 January 2019 в 05:22
поделиться
Другие вопросы по тегам:

Похожие вопросы: