Здесь приведен пошаговый процесс переноса связанной наблюдаемой диаграммы в самодостаточную веб-страницу путем копирования кода и без необходимости использования библиотеки observable runtime .
Начиная со страницы HTML и файла JavaScript, указанного на странице HTML. Предполагается, что веб-сервер работает и настроен соответствующим образом.
- Получите данные.
- Если вы хотите использовать собственные данные вместо данных, используемых в записной книжке, сделайте файлы данных доступными в каталоге на вашем веб-сервере.
- в противном случае загрузите каждый входной набор данных, прикрепленный к блокноту, используя ссылку
Download JSON из меню data каждой ячейки.
Загрузить каждый набор данных на странице, используя
d3-fetch d3.json("/path/to/data.json").then(function(data) {
console.log(data); // [{"Hello": "world"}, …]
});
Получите содержимое каждой ячейки, содержащей переменную или функцию в записной книжке, и поместите ее в функцию .then из предыдущего шага. Этот ноутбук визуализатор может быть полезен для идентификации соответствующих ячеек.
Адаптируйте синтаксис только что скопированных функций, как нужно. Например, следующую ячейку записной книжки:
root = { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }
можно преобразовать в:
function getRoot(){
let i = 0;
return d3.hierarchy(data).eachBefore(d => d.index = i++);
}
root = getRoot()
При необходимости какой-либо функции из записной книжки определите переменную width и инициализируйте ее требуемым значением.
адаптируйте код манипуляции DOM для добавляйте элементы в DOM, а не полагайтесь на неявное выполнение с помощью наблюдаемой среды выполнения.
Демонстрация приведена ниже:
d3.json("https://rawcdn.githack.com/d3/d3-hierarchy/46f9e8bf1a5a55e94c40158c23025f405adf0be5/test/data/flare.json").then(function(data) {
const width = 800
, nodeSize = 17
, format = d3.format(",")
, getRoot = function(){
let i = 0;
return d3.hierarchy(data).eachBefore(d => d.index = i++);
}
, columns = [
{
label: "Size",
value: d => d.value,
format,
x: 280
},
{
label: "Count",
value: d => d.children ? 0 : 1,
format: (value, d) => d.children ? format(value) : "-",
x: 340
}
]
, root = getRoot()
, chart = function() {
const nodes = root.descendants();
const svg = d3.select('#chart')
.attr("viewBox", [-nodeSize / 2, -nodeSize * 3 / 2, width, (nodes.length + 1) * nodeSize])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.style("overflow", "visible");
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#999")
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d => `
M${d.source.depth * nodeSize},${d.source.index * nodeSize}
V${d.target.index * nodeSize}
h${nodeSize}
`);
const node = svg.append("g")
.selectAll("g")
.data(nodes)
.join("g")
.attr("transform", d => `translate(0,${d.index * nodeSize})`);
node.append("circle")
.attr("cx", d => d.depth * nodeSize)
.attr("r", 2.5)
.attr("fill", d => d.children ? null : "#999");
node.append("text")
.attr("dy", "0.32em")
.attr("x", d => d.depth * nodeSize + 6)
.text(d => d.data.name);
node.append("title")
.text(d => d.ancestors().reverse().map(d => d.data.name).join("/"));
for (const {label, value, format, x} of columns) {
svg.append("text")
.attr("dy", "0.32em")
.attr("y", -nodeSize)
.attr("x", x)
.attr("text-anchor", "end")
.attr("font-weight", "bold")
.text(label);
node.append("text")
.attr("dy", "0.32em")
.attr("x", x)
.attr("text-anchor", "end")
.attr("fill", d => d.children ? null : "#555")
.data(root.copy().sum(value).descendants())
.text(d => format(d.value, d));
}
}
chart()
}).catch(function(err) {
console.log('error processing data', err)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"></script>
<svg id = 'chart'></svg>