个人中心
gpt4 book ai didi

d3.js - 如何将 ObservableHq 简单算法解释为可重用的代码片段？

转载 作者：行者123 更新时间：2023-12-03 16:02:48 27 4
gpt4 key购买 nike

D3js 解决方案的主要来源是 observableHq.com ，但似乎 不可能 (?) 通过复制/粘贴来重用算法......是吗？偶查教程like this ，没有简单的方法 (更少的插件或程序员的时间消耗!)检查和重用 .

示例:我需要一个新的 2020 D3js v5 算法来进行缩进树可视化，并且有一个很好的解决方案:observableHq.com/@d3/indented-tree .下载没有用，因为它基于 复杂 运行时类...

但是，似乎是一个简单的图表生成器算法，

chart = {  // the indented-tree algorithm
  const nodes = root.descendants();
  const svg = d3.create("svg")// ...
  // ...
  return svg.node();
}

我可以通过简单的人工逐步将其转换为简单的 HTML，没有复杂的改编，以 <script src="https://d3js.org/d3.v5.min.js"></script> 开头吗？并以没有运行时类使用结束？

更多细节作为例子

想象我一步一步的 cited indented-tree algorithm ，我无法完成并需要您的帮助:

假设从一个干净的 HTML5 模板开始。例如: 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Indented Tree</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
    function onLOAD() {
        console.log("Hello onLoad!")
        // all copy-paste and adaptations HERE.
        console.log("!Bye!")
    } // \onLOAD
    </script>
</head>
<body onload="onLOAD()">
  <script>
    console.log("Hello!")
    // global INITIALIZATIONS HERE.
  </script>
</body>
</html>
  • 准备全局变量，好像root , nodeSize=17 , 和 width
  • 准备数据... JSON 数据丑陋 ./files/e6537420... ，我用它的真名移到了项目的根目录，flare-2.json .
  • 简单经典的 D3js 读取 JSON 数据的方式:d3.json("./flare-2.json").then( data=> console.log(data) );必须测试并检查没有 CORS 错误等
  • 准备数据为 root多变的。全部进data => {}阻止以避免同步问题...似乎root位于 function(d3,data)
    { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }     .
  • 复制粘贴 chart =以上引用，在 root 之后用数据初始化。
  • ...


    • 常问问题

    评论问题和答案:

    @Mehdi   -   Could you explain what the problem is with including the D3 script tag and using Runtime library in the code?



    当原来的ObservableHq算法很简单，我需要另一种方式， 一个简单的方法通过复制/粘贴和最少的调整来重用它。

    @Mehdi   -   Did you read the Downloading and embedding notebooks tutorial?



    是的，那里没有消息:没有关于如何重用代码的“人工指令”......只有“安装它”和“安装那个”。没有关于我上面解释的“复制/粘贴和最小改编”的说明。

    (@nobody) - What you need as answer?



    正如我上面展示的，一个简单的人类可读的逐步转换过程......理想情况下，最终结果可以通过测试，证明它可以在，例如，JSFiddle，复制/粘贴代码等等适应线以显示您的观点。

    最佳答案

    2020 年 11 月 编辑
    Observable 现在有一个 embed功能，详情在 this page .
    原帖
    这是通过复制粘贴代码将链接的可观察图表移植到自托管网页的分步过程，无需使用 observable runtime library .
    从 HTML 页面和 HTML 页面中引用的 JavaScript 文件开始。假设 Web 服务器正在运行并配置为合适的。

  • 获取数据。
  • 如果您想使用自己的数据而不是笔记本中使用的数据，请将数据文件放在 Web 服务器上的目录中。
  • 否则，使用 Download JSON 下载附加到笔记本的每个输入数据集。链接来自每个 data单元格的菜单。

    • screenshot of an observable notebook cell menu
  • 使用 d3-fetch 加载页面中的每个数据集
    • d3.json("/path/to/data.json").then(function(data) {
      console.log(data); // [{"Hello": "world"}, …]
    });
  • 获取笔记本中包含变量或函数的每个单元格的内容，然后放入.then上一步的功能。此 notebook visualizer工具有助于识别相关细胞。
  • 根据需要调整刚刚复制的函数的语法。例如，以下笔记本单元格:
    • 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，而不是依赖于 observable 运行时的隐式执行。

    • 下面截图中的演示: 

    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>

    关于d3.js - 如何将 ObservableHq 简单算法解释为可重用的代码片段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60772491/

    27 4 0
    文章推荐： scala - 如何为多个 Scala 版本和差异依赖项组织代码
    文章推荐： amazon-web-services - 测试是否触发了 AWS EventBridge(或 CloudWatch)事件
    文章推荐： sql - 解释不带组使用时的 COUNT 返回值
    文章推荐： Azure Artifacts 对于某些公共(public) npm 包返回 404
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com