我正试着用图像圆圈取代彩色圆圈.下面的图是在Java脚本中使用d3绘制的. 我不能添加图像,因为我的评分低于10.

enter image description here

// https://observablehq.com/@d3/smooth-zooming@58


function _chart(width,height,d3,data,radius)
{
  let currentTransform = [width / 2, height / 2, height];

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

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

  g.selectAll("circle")
    .data(data)
    .join("circle")
      .attr("cx", ([x]) => x)
      .attr("cy", ([, y]) => y)
      .attr("r", radius)
      .attr("fill", (d, i) => d3.interpolateRainbow(i/360))

  function transition() {
    const d = data[Math.floor(Math.random() * data.length)];
    const i = d3.interpolateZoom(currentTransform, [...d, radius * 2 + 1]);

    g.transition()
        .delay(250)
        .duration(i.duration)
        .attrTween("transform", () => t => transform(currentTransform = i(t)))
        .on("end", transition);
  }

  function transform([x, y, r]) {
    return `
      translate(${width / 2}, ${height / 2})
      scale(${height / r})
      translate(${-x}, ${-y})
    `;
  }

  return svg.call(transition).node();
}


function _height(){return(
500
)}

function _radius(){return(
  2
)}

function _step(radius){return(
radius * 2
)}

function _data(step,theta,width,height){return(
Array.from({length: 2000}, (_, i) => {
  const r = step * Math.sqrt(i += 0.5), a = theta * i;
  return [
    width / 2 + r * Math.cos(a),
    height / 2 + r * Math.sin(a)
  ];
})
)}

function _theta(){return(
Math.PI * (3 - Math.sqrt(5))
)}

function _d3(require){return(
require("d3@6")
)}

export default function define(runtime, observer) {
  const main = runtime.module();
  
  main.variable(observer("chart")).define("chart", ["width","height","d3","data","radius"], _chart);
  main.variable().define("height", _height);
  main.variable().define("radius", _radius);
  main.variable().define("step", ["radius"], _step);
  main.variable().define("data", ["step","theta","width","height"], _data);
  main.variable().define("theta", _theta);
  main.variable().define("d3", ["require"], _d3);
  return main;
}

我认为我们可能需要改变数据功能.我不能用图像来展示它,因为我是Javascript的初学者.

推荐答案

首先,你直接的问题是:

我正试着用图像圆圈取代彩色圆圈.

这个问题已经在StackOverflow,for example here上得到了多次回答.

但是,在d3的上下文中执行此操作略有不同,因为您可能需要一些类似以下内容的代码:

let url = ...
let defs = svg.append("defs");
defs
  .append("pattern")
  ...
  .attr("id", 'image')
  .append("image")
  ...
  .attr("href", url);

下面是关于这一点的更多细节.

另外,您发布的代码块在我看来像是由Observalbe Embedding API返回的,即: https://api.observablehq.com/@d3/smooth-zooming.js?v=3

我已经修改了那个笔记本,并做了必要的修改,包括了几张图片.Here's the fork,下面是嵌入该代码的正确方式:

<div id="observablehq-chart-25b97cbc"></div>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/d/adfba0cfb4396df0.js?v=3";
new Runtime().module(define, name => {
  if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-25b97cbc"));
});
</script>

如果判断forked notebook,您应该注意到顶部附近有一个代码块,如下所示:

image_urls = [
  "https://upload.wikimedia.org/wikipedia/commons/3/3d/Perspectiva_Corporum_Regularium_36a.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/7/7f/Hexaeder_NdFeB_5041.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/f/f6/Hexader_1.jpg"
]

我猜这可能是指向图片的任何可公开访问的URL列表.

定义chart的下一个代码块包含几行代码,如下所示:

let defs = svg.append("defs");
image_urls.forEach(function (url, i) {
  defs
    .append("pattern")
    .attr("id", `image${i}`)
    .attr("x", "0%")
    .attr("y", "0%")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", "50 50 200 100")
    .append("image")
    .attr("x", "0%")
    .attr("y", "0%")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("href", url);
});

这将设置可用作填充的图案.最后,该位在以后连接圆时使用:

g.selectAll("circle")
  .data(data)
  .join("circle")
  ...
  .attr("fill", (_, i) => `url(#image${i % image_urls.length}`);

Javascript相关问答推荐

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

try 使用javascript隐藏下拉 Select

为什么JPG图像不能在VITE中导入以进行react ?

使用Document.Evaluate() Select 一个包含撇号的HTML元素

在Odoo中如何以编程方式在POS中添加产品

在JS/TS中将复杂图形转换为数组或其他数据 struct

如何更改Html元素S的 colored颜色 ,然后将其褪色为原始 colored颜色

将延迟加载的模块转换为Eager 加载的模块

如何在Reaction中设置缺省值, Select 下拉列表,动态追加剩余值?

在此div中添加一个类,并在一段时间后在Java脚本中将其删除

如何判断字符串是否只包含特定字符串

Tinymce CREATE COMMENT函数不读取更新状态

无法将产品添加到Collection 夹屏幕并获取此TypeError:undefined不是函数?

面临错误:未捕获RangeError-超出最大调用堆栈大小

在promise.all之前选中NULL

try 使用Reaction路由V5渲染多个布局

$.fileName在OS X和Adobe Illustrator的脚本中不起作用

我不能在ANGLE项目中使用addEventListner添加方法

Reaction加载器不能处理派生路径

将包含数字字符的新字符串与现有数字字符串合并