d3.js 相关问题

我正在尝试使用 d3js 进行缩放和平移。我附上了下面的代码。我正在使用 d3js v6。缩放当前无法使用佐...</desc> <question vote="1"> <p>我正在尝试使用 d3js 进行缩放和平移。我附上了下面的代码。我正在使用 d3js v6。目前缩放功能无法使用</p> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <title>Zoom + Pan</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> .overlay { fill: none; pointer-events: all; } button { padding: 10px 20px; } </style> <body> <div id="buttons"> <button class="zooming" id="zoom_in">+</button> <button class="zooming" id="zoom_out">-</butto/*n> <button class="panning" id="pan_right">→</button> <button class="panning" id="pan_left">←</button> <button class="panning" id="pan_top">↓</button> <button class="panning" id="pan_top">↑</button> </div> <script> var width = 960, height = 500; var randomX = d3.randomNormal(width / 2, 80), randomY = d3.randomNormal(height / 2, 80); var data = d3.range(2000).map(function() { return [randomX(), randomY() ]; }); var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([ [ -1000, -500 ], [ 1000, 500 ] ]).on("zoom", zoomed); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .call(zoom) .append("g"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height); svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + d + ")"; }); function zoomed() { svg.attr("transform", "translate(" + [d3.zoomTransform(this).x,d3.zoomTransform(this).y] + ")" + "scale(" + d3.zoomTransform(this).k + ")" ); } async function interpolateZoom (translate, scale) { var self = this; await d3.transition().duration(350).tween("zoom", function () { var iTranslate = d3.interpolate([d3.zoomTransform(this).x,d3.zoomTransform(this).y], translate), iScale = d3.interpolate( d3.zoomTransform(this).k, scale); return function (t) { d3.zoomIdentity .scale(scale) .translate(translate); zoomed(); }; }); } function zoomClick() { var clicked = d3.event.target, direction = 1, factor = 0.2, target_zoom = 1, center = [width / 2, height / 2], extent = zoom.scaleExtent(), translate = zoom.translate(), translate0 = [], l = [], view = {x: translate[0], y: translate[1], k: zoom.scale()}; d3.event.preventDefault(); direction = (this.id === 'zoom_in') ? 1 : -1; target_zoom = zoom.scale() * (1 + factor * direction); if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; } translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k]; view.k = target_zoom; l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y]; view.x += center[0] - l[0]; view.y += center[1] - l[1]; interpolateZoom([view.x, view.y], view.k); } d3.selectAll('button').on('click', zoomClick); </script> </code></pre> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <title>Zoom + Pan</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> .overlay { fill: none; pointer-events: all; } button { padding: 10px 20px; } </style> <body> <div id="buttons"> <button class="zooming" id="zoom_in">+</button> <button class="zooming" id="zoom_out">-</butto/*n> <button class="panning" id="pan_right">→</button> <button class="panning" id="pan_left">←</button> <button class="panning" id="pan_top">↓</button> <button class="panning" id="pan_top">↑</button> </div> <script> var width = 960, height = 500; var randomX = d3.randomNormal(width / 2, 80), randomY = d3.randomNormal(height / 2, 80); var data = d3.range(2000).map(function() { return [randomX(), randomY() ]; }); var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([ [ -1000, -500 ], [ 1000, 500 ] ]).on("zoom", zoomed); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .call(zoom) .append("g"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height); svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + d + ")"; }); function zoomed() { svg.attr("transform", "translate(" + [d3.zoomTransform(this).x,d3.zoomTransform(this).y] + ")" + "scale(" + d3.zoomTransform(this).k + ")" ); } async function interpolateZoom (translate, scale) { var self = this; await d3.transition().duration(350).tween("zoom", function () { var iTranslate = d3.interpolate([d3.zoomTransform(this).x,d3.zoomTransform(this).y], translate), iScale = d3.interpolate( d3.zoomTransform(this).k, scale); return function (t) { d3.zoomIdentity .scale(scale) .translate(translate); zoomed(); }; }); } function zoomClick() { var clicked = d3.event.target, direction = 1, factor = 0.2, target_zoom = 1, center = [width / 2, height / 2], extent = zoom.scaleExtent(), translate = zoom.translate(), translate0 = [], l = [], view = {x: translate[0], y: translate[1], k: zoom.scale()}; d3.event.preventDefault(); direction = (this.id === 'zoom_in') ? 1 : -1; target_zoom = zoom.scale() * (1 + factor * direction); if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; } translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k]; view.k = target_zoom; l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y]; view.x += center[0] - l[0]; view.y += center[1] - l[1]; interpolateZoom([view.x, view.y], view.k); } d3.selectAll('button').on('click', zoomClick); </script></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>您正在使用<strong>D3 V6</strong>。 <pre><code>d3.event.target</code></pre> 一直支持到 <strong>V5</strong>。从 <strong>V6</strong> 开始，使用事件作为回调函数的第一个参数传递：</p> <pre><code>function zoomClick(event) { const clicked = event.target; ... } ... d3.selectAll('button').on('click', zoomClick); </code></pre> </answer> </body></html>

d3.js

回答 0 投票 0

有没有办法将Assistant分配给基于D3.js的OrgChart中的节点？

我不熟悉 D3.js，不知道如何为组织图中的节点分配助理角色。有什么可能的机会吗？我正在尝试创建一个基于 D3.js 的组织结构图并且...

javascript html d3.js charts

回答 2 投票 0

markmap：将思维导图插入 HTML

我想在 Hugo 上使用思维导图，而 Markmap 正是我想要的。但我对其语法非常陌生。（参见下面的代码块）我什至不知道它是什么语言（是 typescript-arrow-

javascript svg d3.js hugo mindmap

回答 3 投票 0

Deneb 格式值，带两位小数和前缀

是否可以在 Deneb 中格式化一个值（我正在使用 Vega-Lite），将 1.000 更改为“1k”或 1.000.000“1M”，并添加该值最多有两位小数 ... &q...