问题：

javascript - [d3js] 已写好的绘图function调用不成功，网页无图像显示？

朱丰

2023-04-26

最近在学习 d3 brush 见官网有案例边下载调试但不成功

将function写在 <script> 标签内调用也没有出错，可是网页无显示任何图像，代码如下：

相关代码：

<!DOCTYPE html>
<html>
<head>
    <script src = "https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<script>
var margin = ({top: 20, right: 20, bottom: 30, left: 40})
var width = 960 - margin.left - margin.right
var height = 440
var focusHeight = 100
var data =  [{ "date":"0.1",  "value":394.46}, 
  { "date":"0.2",  "value":1366.42}, 
  { "date":"0.3",  "value":1498.58}, 
  { "date":"0.4",  "value":1452.43}, 
  { "date":"0.5",  "value":20.6}, 
  { "date":"0.6",  "value":1454.6}, 
  { "date":"0.7",  "value":30.83}, 
  { "date":"0.8",  "value":1217.68}, 
  { "date":"0.9",  "value":1436.51}, 
  { "date":"1.0",  "value":29.4}
  ];

var area = (x, y) => d3.area()
    .defined(d => !isNaN(d.value))
    .x(d => x(d.date))
    .y0(y(0))
    .y1(d => y(d.value))


var x = d3.scaleUtc()
    .domain(d3.extent(data, d => d.date))
    .range([margin.left, width - margin.right])
var y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .range([height - margin.bottom, margin.top])  

var xAxis = (g, x, height) => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))  

var yAxis = (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))



var chart = function(){
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height])
      .style("display", "block");

  svg.append("clipPath")
      .attr("id", "clip")
    .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", "clip")
      .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));
    }
  });
}
chart()

var focus = function(){
  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({selection}) {
    if (selection) {
      svg.property("value", selection.map(x.invert, x).map(d3.utcDay.round));
      svg.dispatch("input");
    }
  }

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

  return svg.node();
}
focus()

var update = function(){
  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]));
}


</script>
</body>
</html>

本人纯新手，还请帮忙看看如何在网页显示图像，谢谢。

共有1个答案

柴增

2023-04-26

你的问题是你创建了 chart 和 focus 函数，但没有把它们添加到 HTML 中

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <div id="chart-container"></div>
  <div id="focus-container"></div>
  <script>
    // ...你的原始代码...

    const chartNode = chart();
    document.getElementById("chart-container").appendChild(chartNode);

    const focusNode = focus();
    document.getElementById("focus-container").appendChild(focusNode);
  </script>
</body>
</html>

类似资料：

Java图像调整BufferedImage不绘制

我正在尝试调整图像大小，将其另存为BuffereImage。如果不缩放图像，效果很好。在下面的代码中，文件名被传入并转换为buffereImage。使用
Python不显示绘图

当我运行以下代码时，即使没有收到任何错误消息，也不会显示绘图。我试过以下方法：1）更换Spyder- 我正在使用Python 3.6和Anaconda附带的Spyder
图像图标不显示

我尝试了一切，但图像不会显示，我试图缩小图像，但没有用，我试图改变路径，我试图更改图像的位置，但没有帮助，我试图在互联网上搜索，但什么都没有。我看到的只是空白的图形用户界面，没有文本和图像。如果你能帮我，你会帮我一个大忙。代码如下:
图像图标无法显示

Mac OSX Netbeans JAVA 目标：21点程序…我正在尝试将扑克牌的图像图标显示在JLabel中逻辑:我创建了一些CARD对象，用一个方法返回与之相关的imageIcon。在我的主GUI类中，如果我创建新的imageIcon来指定文件位置，它就会工作注释掉的行工作正常，显示imageIcon图像，但是当我使用card1.getImage()方法时，图像不显示。方法很简单- 此外，
不显示Javafx的图像

它应该显示一个与掷骰子一致的图像，但什么也没有发生。有问题的图像在包中（如果有关系，请单击并拖入项目窗口）。我在system.out.print中添加了t，以便显示Dice1和2的结果，这样我就知道这是有效的。我还需要添加一些东西来使它看起来像吗？我以前从未在JavaFX中使用过实际的图像....总的来说，我对JavaFX是新手。 GetChildren c:\users\ethan c.b的错
如何使用JavaScript显示图像？

问题内容：我正在尝试通过JavaScript显示图像，但是我不知道该怎么做。我有以下在HTML中我不知道该在哪里放类似的东西。 HTML？或者别的地方… 问题答案：您可以使用Javascript DOMAPI。特别是，请查看createElement（）方法。您可以创建一个可重复使用的函数，以创建一个像这样的图像… 然后您可以像这样使用它…

javascript - [d3js] 已写好的绘图function调用不成功，网页无图像显示？

最近在学习 d3 brush 见官网有案例边下载调试但不成功

将function写在 <script> 标签内调用也没有出错，可是网页无显示任何图像，代码如下：

相关代码：

本人纯新手，还请帮忙看看如何在网页显示图像，谢谢。

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档