Fatal编程技术网
  • d3.js/
  • D3.js 如何运行D3示例

D3.js 如何运行D3示例

d3.js

D3.js 如何运行D3示例,d3.js,observablehq,D3.js,Observablehq,比如说 如果将脚本片段粘贴到HTML文件中的标记中，那么（显然）它就不起作用了 你要怎么管理这些东西 italicf到底是什么 为什么没有以分号结尾的语句，为什么在声明时没有var 这肯定行不通吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v4.js">&

比如说

如果将脚本片段粘贴到HTML文件中的
标记中，那么（显然）它就不起作用了

你要怎么管理这些东西

italic
f
到底是什么

为什么没有以分号结尾的语句，为什么在声明时没有
var

这肯定行不通吗

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<h1>H1</h1?

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>


<script type="text/javascript">
chart = {
  const x = d3.scaleLinear().rangeRound([0, width]);
  const y = d3.scaleLinear().rangeRound([0, height]);

  const svg = d3.create("svg")
      .attr("viewBox", [0.5, -30.5, width, height + 30])
      .style("font", "10px sans-serif");

  let group = svg.append("g")
      .call(render, treemap(data));

  function render(group, root) {
    const node = group
      .selectAll("g")
      .data(root.children.concat(root))
      .join("g");

    node.filter(d => d === root ? d.parent : d.children)
        .attr("cursor", "pointer")
        .on("click", d => d === root ? zoomout(root) : zoomin(d));

    node.append("title")
        .text(d => `${name(d)}\n${format(d.value)}`);

    node.append("rect")
        .attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
        .attr("fill", d => d === root ? "#fff" : d.children ? "#ccc" : "#ddd")
        .attr("stroke", "#fff");

    node.append("clipPath")
        .attr("id", d => (d.clipUid = DOM.uid("clip")).id)
      .append("use")
        .attr("xlink:href", d => d.leafUid.href);

    node.append("text")
        .attr("clip-path", d => d.clipUid)
        .attr("font-weight", d => d === root ? "bold" : null)
      .selectAll("tspan")
      .data(d => (d === root ? name(d) : d.data.name).split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)))
      .join("tspan")
        .attr("x", 3)
        .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
        .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
        .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "normal" : null)
        .text(d => d);

    group.call(position, root);
  }

  function position(group, root) {
    group.selectAll("g")
        .attr("transform", d => d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})`)
      .select("rect")
        .attr("width", d => d === root ? width : x(d.x1) - x(d.x0))
        .attr("height", d => d === root ? 30 : y(d.y1) - y(d.y0));
  }

  // When zooming in, draw the new nodes on top, and fade them in.
  function zoomin(d) {
    const group0 = group.attr("pointer-events", "none");
    const group1 = group = svg.append("g").call(render, d);

    x.domain([d.x0, d.x1]);
    y.domain([d.y0, d.y1]);

    svg.transition()
        .duration(750)
        .call(t => group0.transition(t).remove()
          .call(position, d.parent))
        .call(t => group1.transition(t)
          .attrTween("opacity", () => d3.interpolate(0, 1))
          .call(position, d));
  }

  // When zooming out, draw the old nodes on top, and fade them out.
  function zoomout(d) {
    const group0 = group.attr("pointer-events", "none");
    const group1 = group = svg.insert("g", "*").call(render, d.parent);

    x.domain([d.parent.x0, d.parent.x1]);
    y.domain([d.parent.y0, d.parent.y1]);

    svg.transition()
        .duration(750)
        .call(t => group0.transition(t).remove()
          .attrTween("opacity", () => d3.interpolate(1, 0))
          .call(position, d))
        .call(t => group1.transition(t)
          .call(position, d.parent));
  }

  return svg.node();
}

data = FileAttachment("flare-2.json").json()

treemap = data => d3.treemap()
    .tile(tile)
  (d3.hierarchy(data)
    .sum(d => d.value)
    .sort((a, b) => b.value - a.value))

function tile(node, x0, y0, x1, y1) {
  d3.treemapBinary(node, 0, 0, width, height);
  for (const child of node.children) {
    child.x0 = x0 + child.x0 / width * (x1 - x0);
    child.x1 = x0 + child.x1 / width * (x1 - x0);
    child.y0 = y0 + child.y0 / height * (y1 - y0);
    child.y1 = y0 + child.y1 / height * (y1 - y0);
  }
}

name = d => d.ancestors().reverse().map(d => d.data.name).join("/")
width = 954
height = 924
format = d3.format(",d")
d3 = require("d3@5")
</script>
</body>
</html>



H1如果您使用Observable作为原型工具，您首先必须知道它们具有不同的Javascript风格。您不能将单元格复制并粘贴到纯html/js文件中，但使用它们的生态系统确实非常容易

下面是他们文档中的一些链接


    

  • 


如果您正在进行原型设计并希望快速嵌入代码


    

  • 

  • 


另一个关于如何将笔记本转换为单机版的资源


    

  • 


下面是另一个类似的问题和答案




希望这对您有用
以下是如何将代码从ObservaleHQ移植到vanilla.js。您应该能够运行这个示例，几乎不需要修改


<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="text/javascript">
'use strict';
 var data = {};
 const  width = 954;
 const height = 924;
 const format = d3.format(",d");
 

 d3.json("/api/graph/flare.json").then(function (dt) {
    data = dt;        
    chart();

})
    .catch(function (error) {
        console.log(error);
});

function chart(){
  treemap = dt => d3.treemap()
  .tile(tile)
  (d3.hierarchy(dt)
  .sum(d => d.value)
  .sort((a, b) => b.value - a.value))
  
  const name = d => d.ancestors().reverse().map(d => d.data.name).join("/")

  const x = d3.scaleLinear().rangeRound([0, width]);
  const y = d3.scaleLinear().rangeRound([0, height]);

  const svg = d3.create("svg")
  .attr("viewBox", [0.5, -30.5, width, height + 30])
  .style("font", "10px sans-serif");

  let group = svg.append("g")
  .call(render, treemap(data));
}

 function render(group, root) {
   const node = group
   .selectAll("g")
   .data(root.children.concat(root))
   .join("g");

   node.filter(d => d === root ? d.parent : d.children)
    .attr("cursor", "pointer")
    .on("click", d => d === root ? zoomout(root) : zoomin(d));

  node.append("title")
    .text(d => `${name(d)}\n${format(d.value)}`);

  node.append("rect")
    .attr("id", d => (d.leafUid = d3.select("leaf")).id)
    .attr("fill", d => d === root ? "#fff" : d.children ? "#ccc" : "#ddd")
    .attr("stroke", "#fff");

  node.append("clipPath")
    .attr("id", d => (d.clipUid = d3.select("clip")).id)
    .append("use")
    .attr("xlink:href", d => d.leafUid.href);

  node.append("text")
    .attr("clip-path", d => d.clipUid)
    .attr("font-weight", d => d === root ? "bold" : null)
    .selectAll("tspan")
    .data(d => (d === root ? name(d) : d.data.name).split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)))
  .join("tspan")
    .attr("x", 3)
    .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
    .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
    .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "normal" : null)
    .text(d => d);

 group.call(position, root);
}

function position(group, root) {
    group.selectAll("g")
    .attr("transform", d => d === root ? `translate(0,-30)` :    `translate(${x(d.x0)},${y(d.y0)})`)
    .select("rect")
    .attr("width", d => d === root ? width : x(d.x1) - x(d.x0))
    .attr("height", d => d === root ? 30 : y(d.y1) - y(d.y0));
 }


function zoomin(d) {
  const group0 = group.attr("pointer-events", "none");
  const group1 = group = svg.append("g").call(render, d);

  x.domain([d.x0, d.x1]);
  y.domain([d.y0, d.y1]);

  svg.transition()
    .duration(750)
    .call(t => group0.transition(t).remove()
      .call(position, d.parent))
    .call(t => group1.transition(t)
      .attrTween("opacity", () => d3.interpolate(0, 1))
      .call(position, d));
 }

function zoomout(d) {
  const group0 = group.attr("pointer-events", "none");
  const group1 = group = svg.insert("g", "*").call(render, d.parent);

  x.domain([d.parent.x0, d.parent.x1]);
  y.domain([d.parent.y0, d.parent.y1]);

  svg.transition()
      .duration(750)
      .call(t => group0.transition(t).remove()
      .attrTween("opacity", () => d3.interpolate(1, 0))
      .call(position, d))
      .call(t => group1.transition(t)
      .call(position, d.parent));
 }

  return svg.node();
}  



function tile(node, x0, y0, x1, y1) {
   d3.treemapBinary(node, 0, 0, width, height);
    for (const child of node.children) {
    child.x0 = x0 + child.x0 / width * (x1 - x0);
    child.x1 = x0 + child.x1 / width * (x1 - x0);
    child.y0 = y0 + child.y0 / height * (y1 - y0);
    child.y1 = y0 + child.y1 / height * (y1 - y0);
  }
 }

 




"严格使用",；
变量数据={}；
常数宽度=954；
常数高度=924；
常量格式=d3.格式（“，d”）；
d3.json（“/api/graph/flare.json”）。然后（函数（dt）{
数据=dt；
图表（）；
})
.catch（函数（错误）{
console.log（错误）；
});
功能图（）{
treemap=dt=>d3.treemap（）
.瓷砖（瓷砖）
（d3.层次结构（dt）
.sum（d=>d.value）
.sort（（a，b）=>b.value-a.value））
const name=d=>d.concenters（）.reverse（）.map（d=>d.data.name）.join（“/”）
常量x=d3.scaleLinear（）.rangeRound（[0，宽度]）；
常量y=d3.scaleLinear（）.rangeRound（[0，高度]）；
const svg=d3.create（“svg”）
.attr（“视图框”[0.5，-30.5，宽度，高度+30]）
.style（“字体”，“10px无衬线”）；
让group=svg.append（“g”）
.调用（渲染、树映射（数据））；
}
函数呈现（组、根）{
常量节点=组
.全选（“g”）
.data（root.children.concat（root））
.加入（“g”）；
node.filter（d=>d==root？d.parent:d.children）
.attr（“光标”、“指针”）
.on（“单击”，d=>d==root？zoomout（root）：zoomin（d））；
node.append（“标题”）
.text（d=>`${name（d）}\n${format（d.value）}`）；
node.append（“rect”）
.attr（“id”，d=>（d.leafUid=d3.select（“leaf”））.id）
.attr（“fill”，d=>d==root？”#fff:d.children？”#ccc:“#ddd”）
.attr（“笔划”、“fff”）；
node.append（“clipPath”）
.attr（“id”，d=>（d.clipUid=d3.select（“clip”））.id）
.append（“使用”）
.attr（“xlink:href”，d=>d.leafUid.href）；
node.append（“文本”）
.attr（“剪辑路径”，d=>d.clipUid）
.attr（“字体重量”，d=>d==根？“粗体”：null）
.selectAll（“tspan”）
.data（d=>（d==根？名称（d）：d.data.name）.split（/（？=[A-Z][^A-Z]）/g）.concat（格式（d.value）））
.加入（“tspan”）
.attr（“x”，3）
.attr（“y”，（d，i，nodes）=>`${（i==nodes.length-1）*0.3+1.1+i*0.9}em`）
.attr（“填充不透明度”，（d，i，节点）=>i==nodes.length-1？0.7:null）
.attr（“字体重量”，（d，i，节点）=>i==nodes.length-1？“正常”：null）
.text（d=>d）；
组调用（位置、根）；
}
功能位置（组、根）{
组。选择全部（“g”）
.attr（“transform”，d=>d==root？`translate（0，-30）`:`translate（${x（d.x0）}，${y（d.y0）}）`）
.选择（“rect”）
.attr（“宽度”，d=>d==根？宽度：x（d.x1）-x（d.x0））
.attr（“高度”，d=>d==根？30:y（d.y1）-y（d.y0））；
}
函数缩放（d）{
constgroup0=group.attr（“指针事件”，“无”）；
constgroup1=group=svg.append（“g”）.call（render，d）；
x、 域（[d.x0，d.x1]）；
y、 域（[d.y0，d.y1]）；
svg.transition（）
.持续时间（750）
.call（t=>group0.transition（t）.remove（）
.呼叫（位置，d.家长））
.call（t=>group1.transition（t）
.attrween（“不透明度”，（）=>d3.插值（0,1））
.呼叫（位置，d））；
}
功能zoomout（d）{
constgroup0=group.attr（“指针事件”，“无”）；
const group1=group=svg.insert（“g”，“*”）.call（render，d.parent）；
x、 域（[d.parent.x0，d.parent.x1]）；
y、 域（[d.parent.y0，d.parent.y1]）；
svg.transition（）
.持续时间（750）
.call（t=>group0.transition（t）.remove（）
.attrween（“不透明度”，（）=>d3.插值（1,0））
.呼叫（位置d））
.call（t=>group1.transition（t）
.呼叫（职位，d.家长））；
}
返回svg.node（）；
}  
功能块（节点x0、y0、x1、y1）{
d3.树状结构（节点，0，0，宽度，高度）；
for（node.children的常量子节点）{
child.x0=x0+child.x0/宽度*（x1-x0）；
child.x1=x0+child.x1/宽度*（x1-x0）；
child.y0=y0+child.y0/身高*（y1-y0）；
child.y1=y0+child.y1/身高*（y1-y0）；
}
}

谢谢，这让事情变得更清楚了。直觉告诉我，我不想给我的MCV核心应用程序增加那么多复杂性。看起来制作d3“笔记本”的唯一方法是在他们的网站上？你不能只使用文本编辑器？我还没有测试过一个实验性的非官方vscode插件。这里有一个关于它的讨论，运行时（开源）非常轻量级，使用他们的在线编辑器非常实用。下载和嵌入非常简单