堆栈内存溢出
  简体   繁体   English

如何在一个浏览器 window 上显示从“observablehq”的单独代码生成的两个图形

[英]How to display two graph generated from separate code from “observablehq” on one browser window

 原文  2020-06-01 22:14:51  9   1    javascript/ d3.js/ svg/ observablehq

问题描述

I am new in d3.js.I downloaded two code generating graphs from site “observablehq”.我是 d3.js 的新手。我从站点“observablehq”下载了两个代码生成图。 Here are links to codes.这是代码的链接。

1- zoomable-area-chart 1-可缩放区域图

2- focus-context 2-焦点上下文

I want to display both graphs in the same browser window .我想在同一个浏览器 window 中显示这两个图。 For this, I placed the files in the same directory.为此，我将文件放在同一目录中。 Here is html code of zoomable-area-chart这是可缩放区域图的 html 代码

<!DOCTYPE html>
<meta charset="utf-8">
<title>Zoomable Area Chart</title>
<link rel="stylesheet" type="text/css" href="./inspector.css">
<body>
<script type="module">

import define from "./index.js";
import {Runtime, Library, Inspector} from "./runtime.js";

const runtime = new Runtime();
const main = runtime.module(define, Inspector.into(document.body));

</script>

Here is html code of focus-context这是焦点上下文的 html 代码

<!DOCTYPE html>
<meta charset="utf-8">
<title>Focus + Context</title>
<link rel="stylesheet" type="text/css" href="inspector1.css">
<body>
<script type="module">

import define from "./index1.js";
import {Runtime, Library, Inspector} from "./runtime1.js";

const runtime = new Runtime();
const main = runtime.module(define, Inspector.into(document.body));

</script>

I placed "Focus + Context" "script" in html file of "Zoomable Area Chart" like this我像这样在“Zoomable Area Chart”的 html 文件中放置了“Focus + Context”“脚本”

    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Zoomable Area Chart</title>
    <link rel="stylesheet" type="text/css" href="./inspector.css">
    <body>
    <script type="module">

    import define from "./index.js";
    import {Runtime, Library, Inspector} from "./runtime.js";

    const runtime = new Runtime();
    const main = runtime.module(define, Inspector.into(document.body));

    </script>
    <script type="module">

        import define from "./index1.js";
        import {Runtime, Library, Inspector} from "./runtime1.js";

        const runtime = new Runtime();
        const main = runtime.module(define, Inspector.into(document.body));

    </script>

then I ran that html file using "webstorm" into browser.然后我使用“webstorm”将 html 文件运行到浏览器中。 It is not displaying both graphs into the same browser window.它不会在同一个浏览器 window 中显示两个图表。 It is displaying errors for the first graph and displaying the second graph它显示第一个图的错误并显示第二个图

在此处输入图像描述

Here is js file for "Zoomable Area Chart"这是“可缩放区域图”的 js 文件

// https://observablehq.com/@d3/zoomable-area-chart@212
export default function define(runtime, observer) {
  const main = runtime.module();
  const fileAttachments = new Map([["flights.csv",new URL("./files/1171cb24da0255c434c1ff554b4964c39c1253aa9349f2d356a25351acd3579367f92b24366ae5b6c208c9336811489c0a176cbc0cc62e31feff51e294a178fe",import.meta.url)]]);
  main.builtin("FileAttachment", runtime.fileAttachments(name => fileAttachments.get(name)));
  main.variable(observer()).define(["md"], function(md){return(
md`# Zoomable Area Chart

This zoomable time series area chart shows the number of flights per day. The effect of the September 11, 2001 attacks on air travel is evident.`
)});
  main.variable(observer("chart")).define("chart", ["d3","margin","width","height","DOM","area","data","x","xAxis","yAxis","y"], function(d3,margin,width,height,DOM,area,data,x,xAxis,yAxis,y)
{
  const zoom = d3.zoom()
      .scaleExtent([1, 32])
      .extent([[margin.left, 0], [width - margin.right, height]])
      .translateExtent([[margin.left, -Infinity], [width - margin.right, Infinity]])
      .on("zoom", zoomed);

  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  const clip = DOM.uid("clip");

  svg.append("clipPath")
      .attr("id", clip.id)
    .append("rect")
      .attr("x", margin.left)
      .attr("y", margin.top)
      .attr("width", width - margin.left - margin.right)
      .attr("height", height - margin.top - margin.bottom);

  const path = svg.append("path")
      .attr("clip-path", clip)
      .attr("fill", "steelblue")
      .attr("d", area(data, x));

  const gx = svg.append("g")
      .call(xAxis, x);

  svg.append("g")
      .call(yAxis, y);

  svg.call(zoom)
    .transition()
      .duration(750)
      .call(zoom.scaleTo, 4, [x(Date.UTC(2001, 8, 1)), 0]);

  function zoomed() {
    const xz = d3.event.transform.rescaleX(x);
    path.attr("d", area(data, xz));
    gx.call(xAxis, xz);
  }

  return svg.node();
}
);
  main.variable(observer("height")).define("height", function(){return(
500
)});
  main.variable(observer("margin")).define("margin", function(){return(
{top: 20, right: 20, bottom: 30, left: 30}
)});
  main.variable(observer("x")).define("x", ["d3","data","margin","width"], function(d3,data,margin,width){return(
d3.scaleUtc()
    .domain(d3.extent(data, d => d.date))
    .range([margin.left, width - margin.right])
)});
  main.variable(observer("y")).define("y", ["d3","data","height","margin"], function(d3,data,height,margin){return(
d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)]).nice()
    .range([height - margin.bottom, margin.top])
)});
  main.variable(observer("xAxis")).define("xAxis", ["height","margin","d3","width"], function(height,margin,d3,width){return(
(g, x) => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
)});
  main.variable(observer("yAxis")).define("yAxis", ["margin","d3","data"], function(margin,d3,data){return(
(g, y) => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(null, "s"))
    .call(g => g.select(".domain").remove())
    .call(g => g.select(".tick:last-of-type text").clone()
        .attr("x", 3)
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .text(data.y))
)});
  main.variable(observer("area")).define("area", ["d3","y"], function(d3,y){return(
(data, x) => d3.area()
    .curve(d3.curveStepAfter)
    .x(d => x(d.date))
    .y0(y(0))
    .y1(d => y(d.value))
  (data)
)});
  main.variable(observer("data")).define("data", ["d3","FileAttachment"], async function(d3,FileAttachment){return(
Object.assign(d3.csvParse(await FileAttachment("flights.csv").text(), d3.autoType), {y: "Flights"})
)});
  main.variable(observer("d3")).define("d3", ["require"], function(require){return(
require("d3@5")
)});
  return main;
}

Here is js file for "Focus + Context"这是“焦点+上下文”的js文件

// https://observablehq.com/@d3/focus-context@320
export default function define(runtime, observer) {
  const main = runtime.module();
  const fileAttachments = new Map([["aapl.csv",new URL("./files/de259092d525c13bd10926eaf7add45b15f2771a8b39bc541a5bba1e0206add4880eb1d876be8df469328a85243b7d813a91feb8cc4966de582dc02e5f8609b7",import.meta.url)]]);
  main.builtin("FileAttachment", runtime.fileAttachments(name => fileAttachments.get(name)));
  main.variable(observer()).define(["md"], function(md){return(
md`# Focus + Context

This [area chart](/@d3/area-chart) uses brushing to specify a focused area. Drag the gray region to pan, or brush to zoom. Compare to a [zoomable chart](/@d3/zoomable-area-chart). Data: [Yahoo Finance](https://finance.yahoo.com/lookup)`
)});
  main.variable(observer("chart")).define("chart", ["d3","width","height","DOM","margin","data","xAxis","yAxis","area"], function(d3,width,height,DOM,margin,data,xAxis,yAxis,area)
{
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height])
      .style("display", "block");

  const clipId = DOM.uid("clip");

  svg.append("clipPath")
      .attr("id", clipId.id)
    .append("rect")
      .attr("x", margin.left)
      .attr("y", 0)
      .attr("height", height)
      .attr("width", width - margin.left - margin.right);

  const gx = svg.append("g");

  const gy = svg.append("g");

  const path = svg.append("path")
      .datum(data)
      .attr("clip-path", clipId)
      .attr("fill", "steelblue");

  return Object.assign(svg.node(), {
    update(focusX, focusY) {
      gx.call(xAxis, focusX, height);
      gy.call(yAxis, focusY, data.y);
      path.attr("d", area(focusX, focusY));
    }
  });
}
);
  main.variable(observer("viewof focus")).define("viewof focus", ["d3","width","focusHeight","margin","x","xAxis","data","area","y"], function(d3,width,focusHeight,margin,x,xAxis,data,area,y)
{
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, focusHeight])
      .style("display", "block");

  const brush = d3.brushX()
      .extent([[margin.left, 0.5], [width - margin.right, focusHeight - margin.bottom + 0.5]])
      .on("brush", brushed)
      .on("end", brushended);

  const defaultSelection = [x(d3.utcYear.offset(x.domain()[1], -1)), x.range()[1]];

  svg.append("g")
      .call(xAxis, x, focusHeight);

  svg.append("path")
      .datum(data)
      .attr("fill", "steelblue")
      .attr("d", area(x, y.copy().range([focusHeight - margin.bottom, 4])));

  const gb = svg.append("g")
      .call(brush)
      .call(brush.move, defaultSelection);

  function brushed() {
    if (d3.event.selection) {
      svg.property("value", d3.event.selection.map(x.invert, x).map(d3.utcDay.round));
      svg.dispatch("input");
    }
  }

  function brushended() {
    if (!d3.event.selection) {
      gb.call(brush.move, defaultSelection);
    }
  }

  return svg.node();
}
);
  main.variable(observer("focus")).define("focus", ["Generators", "viewof focus"], (G, _) => G.input(_));
  main.variable(observer()).define(["focus","d3","data","chart","x","y"], function(focus,d3,data,chart,x,y)
{
  const [minX, maxX] = focus;
  const maxY = d3.max(data, d => minX <= d.date && d.date <= maxX ? d.value : NaN);
  chart.update(x.copy().domain(focus), y.copy().domain([0, maxY]));
}
);
  main.variable(observer("data")).define("data", ["d3","FileAttachment"], async function(d3,FileAttachment){return(
Object.assign(d3.csvParse(await FileAttachment("aapl.csv").text(), d3.autoType).map(({date, close}) => ({date, value: close})), {y: "↑ Close $"})
)});
  main.variable(observer("area")).define("area", ["d3"], function(d3){return(
(x, y) => d3.area()
    .defined(d => !isNaN(d.value))
    .x(d => x(d.date))
    .y0(y(0))
    .y1(d => y(d.value))
)});
  main.variable(observer("x")).define("x", ["d3","data","margin","width"], function(d3,data,margin,width){return(
d3.scaleUtc()
    .domain(d3.extent(data, d => d.date))
    .range([margin.left, width - margin.right])
)});
  main.variable(observer("y")).define("y", ["d3","data","height","margin"], function(d3,data,height,margin){return(
d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .range([height - margin.bottom, margin.top])
)});
  main.variable(observer("xAxis")).define("xAxis", ["margin","d3","width"], function(margin,d3,width){return(
(g, x, height) => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
)});
  main.variable(observer("yAxis")).define("yAxis", ["margin","d3"], function(margin,d3){return(
(g, y, title) => g
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())
    .call(g => g.selectAll(".title").data([title]).join("text")
        .attr("class", "title")
        .attr("x", -margin.left)
        .attr("y", 10)
        .attr("fill", "currentColor")
        .attr("text-anchor", "start")
        .text(title))
)});
  main.variable(observer("margin")).define("margin", function(){return(
{top: 20, right: 20, bottom: 30, left: 40}
)});
  main.variable(observer("height")).define("height", function(){return(
440
)});
  main.variable(observer("focusHeight")).define("focusHeight", function(){return(
100
)});
  main.variable(observer("d3")).define("d3", ["require"], function(require){return(
require("d3@5")
)});
  return main;
}

How I can display both graphs in the same browser window correctly .如何在同一个浏览器 window 中正确显示两个图表。 You can download the complete project from this link您可以从此链接下载完整的项目

1 个解决方案

解决方案1
 0 已采纳  

iframe is the tag which you can use for call other html pages into your web page iframe 是您可以用来调用其他 html 页面到您的 web 页面的标签

<iframe src="index1.html" height="700px"  width="100%" style=" border:none;"></iframe>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 .NET 5 应用程序中的 observablehq/plot？ - How to use observablehq/plot from .NET 5 app? 如何从另一个浏览器窗口刷新？ - How to refresh the one browser window from another? 与浏览器分开打开新窗口弹出窗口 - open new window popup separate from browser 如何从gwt中的一个浏览器窗口获取数据到另一窗口？ - How to get the data from one browser window to other window in gwt? 如何在IE 11中将变量从一个浏览器窗口传递到另一个浏览器窗口（相同浏览器）？ - How to pass variable from one browser window to the another browser window (Same browser) in IE 11? 如何在 React Js 的一个表中显示来自 2 个单独的 arrays 的数据？ - How to display data from 2 separate arrays in one table in React Js? 如何将具有两个单独对象的数组列表生成的表列中的所有值相加？ - How can I add up all the values in a table column generated from an Array list with two separate objects? 如何防止在图表区域或浏览器窗口调整大小时隐藏highcharts工具提示弹出窗口？ - how to prevent highcharts tooltip popup from hiding, on graph area or browser window resize? 将信息从一个浏览器窗口发送到另一个 - Send information from one browser window to another 如何在 React 项目中使用 observablehq D3 图？ - How to use observablehq D3 graph in React project?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM