d3.data пропустить первую строку данных

У меня есть следующий код, который отлично работает, за исключением случаев, когда я повторяю свой набор данных, первая строка (индекс 0) пропускается.d3.data пропустить первую строку данных

svg.selectAll("rect") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("x",function(d){ 
    console.log(data); 
    console.log(d); 
    return xScale(d.year-1980); 
    })

Обратите внимание на console.log(data) возвращает свой полный набор данных, в том числе в первом ряду, так что данные там!

Но console.log(d) показывает все строки после и включая мою вторую строку данных - она отбрасывает первую строку.

Любые предложения приветствуются.

источник

2013-10-04 user2846817

+15

Я собираюсь предположить, что у вас уже есть элемент 'rect', когда вы запускаете этот код. Этот элемент сопоставляется с первой строкой данных, и поэтому выбор '.enter()' отсутствует. –

D3 очень мощный, но слишком обширный. Его широко не используется и не публикуется. Он полностью использует мощь javascript. Хотелось бы, чтобы у нас было больше учебников по D3. – MarsOne

Переместите console.log (данные) вне вашей функции x (d). Он печатается для каждого d. Возможно, вы пропустили это. Затем отправьте часть своего вывода. –

У меня была такая же проблема с похожим кодом, и исправлена на основе комментария Lars Kothoff.

В моем случае это имело смысл изменить selectAll работать на ага элемента, больше похоже так:

svg.selectAll("g") 
    .data(data); 
    .enter() 
    .append("g") 
    .append("rect") 
    .attr("x",function(d) { return xScale(d.year-1980); });

Можно также дифференцировать прямоугольники с классом:

svg.selectAll("rect.year") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("x",function(d){ return xScale(d.year-1980); }) 
    .classed("year");

источник

2014-07-09 02:03:05

Нижний подход - это самое простое решение. Ницца. Просто измените 'selectAll (" rect ")' на 'selectAll (" rect.year ")' –

Да, кажется, что если уже есть элемент, он получает «пропущен» с помощью .enter()

<html> 
<head> 

<title>D3 Test</title> 
</head> 

<body> 

</body> 

<script type='text/javascript' src='https://d3js.org/d3.v4.min.js'></script> 
<script type='text/javascript'> 

var theData = ["James", "Sue", "Ben"] 

var p = d3.select("body").selectAll("p")  
    .data(theData) 
    .enter() 
    .append('p') 
    .text(function (d,i) { 
     return " i =" + i + "data =" + d; 
    }); 

</script> 

</html>

Производит

я = 0data = Джеймс

я = 1Данные = Sue

я = 2Данные = Бен

Но если добавить ар элемент там, это будет пропустить ,

...[previous code] 

<body> 
<p>Here is the first p tag that "James gets matched too"</p> 

</body> 

...[previous code]

источник

2017-03-21 15:00:17

d3.data пропустить первую строку данных

ответ

Смежные вопросы