Mysql to JSON to D3js no Visual... ошибка идентификации "класса"
Новое в D3...
Я пытаюсь воспроизвести простой пример, но с моими данными из MySQL. Поскольку я переименовал свои столбцы в "имя" и "размер", переход должен быть простым. Я считаю, что строка / пункт !d.children; ограничивает данные для обработки или мой код ошибочен.
Как я могу добавить класс к существующему.json?
или же
Какой код мне нужно удалить, чтобы заставить работать существующий.json?
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var diameter = 960,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("json.php", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
json.php
<?php
$username = "homedbuser";
$password = "homedbuser";
$host = "localhost";
$database="homedb";
$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);
$myquery = "
SELECT `name`, `size` FROM `lists`
";
$query = mysql_query($myquery);
if ( ! $myquery ) {
echo mysql_error();
die;
}
$data = array();
for ($x = 0; $x < mysql_num_rows($query); $x++) {
$data[] = mysql_fetch_assoc($query);
}
echo json_encode($data);
mysql_close($server);
?>
Кроме того, я думаю, что есть ошибка с root в сценарии (предполагается, что данные). Я буду продолжать обновлять код моего исследования, пока не будут получены ответы.
1 ответ
Решение
Для используемой вами диаграммы требуется, чтобы данные были в иерархическом формате. С заданным вами запросом не похоже, что данные находятся в иерархии.
Я использовал данные CSV, но это не имеет значения, я дал формат, который я использовал для диаграммы, которую вы дали в ссылке.
Напишите ваш SQL-запрос, чтобы получить данные в следующем формате, используйте d3.json и импортируйте файл php, все должно работать нормально.
Я вставил все коды и образцы данных.
Это может помочь вам. Любые вопросы, пожалуйста, предоставьте данные образца тоже.
Данные:
имя, размер
level1,23
level1,23
level1,23
level1,23
level1,23
level1,23
level1,23
level1,23
level1,23
level2,23
level2,23
level2,23
level2,23
level2,23
level2,23
level2,23
level2,23
level2,23Функция, используемая для преобразования в иерархию:
d3.csv ("data.csv", function (root) {var newData = {name: "root", children: []}, level = ["name"];
// Для каждой строки данных выполните цикл по ожидаемому уровни, проходящие через выходное дерево root.forEach(function(d){
// Сохраняем это как ссылку на текущий уровень var deepCursor = newData.children;
// Переход на один уровень за раз уровни..EEFEACH (функция (свойство, глубина)) {// Посмотрим, была ли уже создана ветка var index;
deepCursor.forEach(function(child,i){
if ( d[property] == child.name) index = i;
});
// Добавить ветвь, если ее там нет if ( isNaN(index)) {
deepCursor.push({ name: d[property], children: []});
index = deepCursor.length - 1;
}
// Теперь ссылка на новый дочерний массив по мере того, как мы углубляемся в дерево глубины глубины_глубьКурсора [индекс].children;
// Это лист, поэтому добавьте последний элемент в указанную ветвь, если (глубина === levels.length - 1) deepCursor.push({ name: d.name, size: d.size });
});
});
// Распечатать то, что у нас есть d3.select('body').append('pre')
.text(JSON.stringify(newData, null, ' '));
})Скрипт, объединяющий обе функции:
диаметр диаметра = 960, формат = d3.format(",d"), цвет = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([диаметр, диаметр])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("ширина", диаметр).attr ("высота", диаметр).attr ("класс", "пузырь");
d3.json("yourphpfile.php", функция (ошибка, данные) {
var root = { name:"root", children: [] },
level = ["name"];
// Для каждой строки данных выполните цикл ожидаемые уровни, проходящие через выходное дерево data.forEach(function(d){
// Сохраняем это как ссылку на текущий уровень. var deepCursor = root.children;
// переход на один уровень за раз. level.forEach(function( property), глубина) {// Посмотрим, была ли ветвь уже создана var index;
deepCursor.forEach (function (child, i) {if (d [property] == child.name) index = i;}); / / Добавьте ветку, если ее там нет if ( isNaN(index)) {
deepCursor.push({ name: d[property], children: []});
index = deepCursor.length - 1;
}
// Теперь ссылка новый дочерний массив по мере того, как мы углубляемся в дерево глубины глубиныКурсор = глубиныКурсора [индекс].children;
// Это лист, поэтому добавьте последний элемент в указанную ветвь, если (глубина === levels.length - 1) глубина Cursor.push({ name: d.name, size: d.size });
});
});
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return!d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return dr; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, др / 3); });
});
// Возвращает уплощенную иерархию, содержащую все конечные узлы под корнем. функциональные классы (root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({имя_пакета: имя, имя_класса: имя.узла, значение: узел.размер});
}
recurse(null, root); возврат {дети: классы};
}
d3.select(self.frameElement).style("высота", диаметр + "px");