D3.js исполняется по-разному

Я пришел от javascript фон и я начал d3.js На практике я написал следующий код.D3.js исполняется по-разному

код HTML:

<html> 
<head> 
    <script type="text/javascript" src="d3.min.js"></script> 
</head> 
<body> 
    <p id="firstP"></p> 
    <p id="secondP"></p> 
    <p id="thirdP"></p> 
</body> 
</html>

код расслоение плотной:

var theData = [ 1, 2, 3 ]; 
var p = d3.select("body").selectAll("p") 
     .data(theData) 
     .enter() 
     .append("p") 
     .text(function (d) { return d; }); 
console.log(p);

Моя мотивация, я хочу добавить p узлы между #firstP,#secondP,#thirdP элементами. но после того, как я выполню выше, я получаю null, как d3 обработки этого я не понял.

Для моего тестирования я удалил последний узел p из html-файла, выход 2 нулевых значения и 1 p узел с соответствующими данными (3).

Я не понял, как d3.js справится с этим.

может кто-нибудь мне помочь.

Спасибо.

источник

2014-09-17 jeevan

Ваш вопрос трудно понять. Не могли бы вы продемонстрировать JSFiddle? – joews

В вашем коде вы сопоставляете данные с существующими p элементами. То есть ваш выбор содержит три элемента p, и ваши данные содержат три элемента. Эти элементы соответствуют выбранным элементам, а выбор ввода пуст. См. this tutorial для получения дополнительной информации о том, как работают выборы.

То, что вы пытаетесь сделать, не так просто с D3, потому что вы обычно не вставляете элементы в определенные позиции, а добавляете их в DOM. Однако для достижения этого вы можете использовать .insert(). Это очень надуманно, и я не рекомендую вам делать это на практике.

var theData = [ 1, 2, 3 ]; 
var names = ["firstP", "secondP", "thirdP"]; 
d3.select("body").selectAll("p") 
    .data(theData, function(d) { return d; }) 
    .enter() 
    .insert("p", function(d, i) { return d3.select("#" + names[i]).node(); }) 
    .text(function (d) { return d; });

Полная демо-версия here.

источник

2014-09-17 18:40:44

Если он просто пытается добавить данные к существующим элементам в качестве своего текста, это действительно * очень просто * сделать: 'd3.select ('body'). SelectAll ('p'). Data (theData) .text (function (d) {return d;}) 'Нет необходимости в выборе ввода, поскольку элементы уже существуют. – jshanley

Да, и просто добавление новых элементов после существующих было бы очень просто. Между тем это затрудняет. –

D3.js исполняется по-разному

ответ

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