如何在D3中计算矩形之间的距离？
在D3中计算矩形之间的距离可以通过以下步骤实现：
- 首先，确定矩形的位置信息。在D3中，矩形通常使用SVG元素表示，可以通过获取矩形的x、y坐标以及宽度和高度来确定其位置。
- 使用欧几里得距离公式计算矩形之间的距离。欧几里得距离是计算两个点之间的直线距离的方法，可以用于计算矩形之间的距离。公式如下：
- 距离 = √((x2 - x1)^2 + (y2 - y1)^2)
- 其中，(x1, y1)和(x2, y2)分别是两个矩形的中心点坐标。
- 在D3中，可以使用d3.select()选择器选择要计算距离的矩形元素，并使用.attr()方法获取其位置信息。
- 根据获取的位置信息，计算矩形之间的距离，并将结果显示出来。可以使用d3.select()选择器选择要显示距离的元素，并使用.text()方法将距离值设置为元素的文本内容。
以下是一个示例代码，演示如何在D3中计算矩形之间的距离：
// 创建SVG画布
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// 创建两个矩形
var rect1 = svg.append("rect")
.attr("x", 100)
.attr("y", 100)
.attr("width", 50)
.attr("height", 50)
.attr("fill", "blue");
var rect2 = svg.append("rect")
.attr("x", 200)
.attr("y", 200)
.attr("width", 50)
.attr("height", 50)
.attr("fill", "red");
// 计算矩形之间的距离
var x1 = parseInt(rect1.attr("x")) + parseInt(rect1.attr("width")) / 2;
var y1 = parseInt(rect1.attr("y")) + parseInt(rect1.attr("height")) / 2;
var x2 = parseInt(rect2.attr("x")) + parseInt(rect2.attr("width")) / 2;
var y2 = parseInt(rect2.attr("y")) + parseInt(rect2.attr("height")) / 2;
var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
// 显示距离
svg.append("text")
.attr("x", 250)
.attr("y", 250)
.text("Distance: " + distance);这段代码创建了一个SVG画布，并在画布上绘制了两个矩形。然后，根据矩形的位置信息计算它们之间的距离，并将距离值显示在画布上。
请注意，这只是一个简单的示例，实际应用中可能需要根据具体情况进行适当的调整和扩展。
相关·内容
我试图画一条线，把SVG中的两个圆圈连接起来。圆圈与封装在SVG组元素()中的底层矩形一起使用。这些组被定位为transform=“transform=(x，y)”属性。我的问题是，组内元素的坐标相对于组的起源(0,0坐标)定位。要放置上覆线，我需要知道绝对坐标。
下面是使用D3 javascript库的代码：
var body = d3.select("body");
var svg = body.append("svg");
var group1 = svg.append("g")
.attr("transform"
浏览 6提问于2013-06-14得票数 5
我对d3.js相当陌生，我在d3图中创建了两个箭头，我试图将文本添加到箭头的中心，但我无法看到标签被添加到箭头中。
我的代码链接如下：
代码如下
const data = [ { x1: 50, y1: 50, x2: 200, y2: 50, label: 'Arrow 1', rotation: '0', arrowcolor: '#62b6ae'},
{ x1: 50, y1: 70, x2: 200, y2: 70, label: 'Arrow 2', rotation: '18
浏览 4提问于2022-05-20得票数 0
1回答
我有一些线条，我要把它们作为一个整体来移动。在这种转变发生的时候，有可能单独移动它们吗？
我用一个棍棒人做了一个小例子来展示这个例子。当他向右移动时，他应该动一只手臂。但手臂保持向后。
var mode = "Transition";
var bodySelection = d3.select("body");
var divButton = bodySelection.append("div");
var button = divButton.append("button")
浏览 4提问于2015-10-31得票数 1
回答已采纳
1回答
更新
点击这里的。
原始邮政
移动鼠标时，如何限制交叉毛的坐标？注意，当我将鼠标移动到x轴的左边或y轴的底部时，十字头发和文本仍然显示。当鼠标移动到x轴的左边或y轴的底部时，我希望交叉头发和文本停止显示。
我曾试图添加if else来限制交叉头发，但它没有起作用。例如，我在addCrossHair()函数中尝试了类似于addCrossHair()的东西。
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.axis path,
.a
浏览 1提问于2014-06-12得票数 1
回答已采纳
我使用d3.js创建了x，y，z平面，并希望通过初始方向移动每个轴。例如:x轴-水平方向，y轴-垂直方向，z轴-给定方向。我可以修改代码来水平移动x轴，垂直移动y轴。但是我不能在另一个(z)轴上这样做。我需要更改代码以通过初始方向移动z轴。 下面是我的d3.js代码。完整的代码在这里，x,y,z plane var width = 600,
height = 600,
activeClassName = 'active-d3-item';
var svg = d3.select('.plane').append('svg');
浏览 16提问于2019-05-29得票数 0
回答已采纳
1回答
我试图为SVG中的两行添加简单的悬停文本。我已经在下面的代码中把它作为一个“标题”，但是当我悬停在这两行时，什么都不会发生。既然他们过了马路，我就不在乎你在十字路口上盘旋时会说些什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflar
浏览 6提问于2015-11-04得票数 3
回答已采纳
1回答
我想在垂直轴或水平轴上画线时计算距离。它可以显示从鼠标绘图或任何其他方式画出的距离的线旁。有人能帮我吗？
var width = 400,
height = 500;
var data = [10, 15, 20, 25, 30];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.on(
浏览 4提问于2020-11-03得票数 2
回答已采纳
由于某些原因，在这个代码的最后一个块中，append("g)我们成功了，但是附加行的数据绑定没有成功。我知道应该互相打印10行，但由于某些原因，我甚至无法将它们打印到页面中。有人能看到错误吗？非常感谢你的帮助！
var w = 300;
var dataset = 10;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", w);
svg.append("line
浏览 1提问于2014-05-29得票数 0
回答已采纳
1回答
给出的示例答案在版本3中运行良好，但在4/5版本中，.each被更改为.on，即使将.each更改为.on，示例也不再起作用。还有什么需要考虑的吗？下面是使用D3版本4：的小提琴和代码
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// code, code, code, irrelevant code...
function timeForTimeline
浏览 0提问于2018-05-07得票数 0
回答已采纳
1回答
向svg折线添加背景
、、、
我试图在svg折线上增加一个覆盖效果。基本的目标是使它很容易点击这条线，因为这条线太薄，我想添加一个背景覆盖，将灯光时，盘旋。
我尝试使用下面的方法使用多边形，但这看起来很乏味。(这条线总是由三个部分组成)
是否有一种非常复杂的方法来实现这个目标。
还是有更好的方法让这条线更容易点击？
function draw(x1, y1, x2, y2) {
var svg = d3.select("#canvas");
var overlay = svg.append("polygon")
.style("fill", "
浏览 1提问于2016-11-03得票数 0
回答已采纳
1回答
提出问题的一种方式可能是:如何重构，使其符合d3约定？(代码也包含在下面)
这就是说，而不是像我写的那样：
rotateTransition(line1, 90)
我更喜欢写这样的东西：
line1.transition().attr("rotation-around-origin", 90)
所以问题是:用我的例子中的自定义转换来扩展d3的转换的正确方法是什么？或者:我该如何去修补“线”选择对象呢？
额外的问题:在第6-16行中，我创建了2个具有完全相同初始化的"line“选择。是否有基于另一个选择复制选择的d3方法？类似于：line2 = line1.dup()
以
浏览 0提问于2013-03-01得票数 0
1回答
我有一个d3 force，如果我要按以下方式添加节点：
node = node.data(nodes, function(d) { return d.id;});
node.exit().remove();
node = node.enter().append('circle')
.attr("class", function(d) {return d.type;})
.attr("r", 25)
.merge(node);
所有操作都很好--圆圈
浏览 1提问于2018-06-17得票数 4
回答已采纳
1回答
我正在使用D3构建一个交互式时间线。在SVG画布周围，我放置了黑线作为可视边框。现在，在Firefox和Edge中，当我将其x1和x2值设置为0时，左侧边框是不可见的，而在Chrome中则会显示它(参见下面的代码片段)。一种解决方案是始终将其设置为1，但在Chrome中，其他元素可以在此边框的左侧可见，这是不可取的。我如何使我的代码适应客户端浏览器？问如何检测Chrome，但答案似乎相当棘手。这里有使用特征检测的方法吗？
var svg = d3.select("body").append("svg");
var w = 500, h = 200;
var
浏览 5提问于2016-04-11得票数 0
回答已采纳
我有两个元素，一个circle和一个rectangle，分别包含在一个不同的g元素中，它们的位置相对于它们的父元素，即g元素。在这种情况下，我的circle和rectangle没有定义的x或y位置。这就是我问这个问题的原因，我想知道我如何在svg中完全不知道它们的绝对位置的第1到2行元素。
var svg=d3.select("svg");
var g1=svg.append("g").attr("transform","translate(50,100)");
var g2=svg.append("g").a
浏览 1提问于2020-10-02得票数 2
回答已采纳
我的问题是-我已经使用D3版本4生成了一个散点图。现在，我需要在鼠标悬停时向点添加工具提示。但是，我收到一条错误消息- "setAttribute不是一个函数“，有人能为我提供相同的线索，并检查函数声明是否正确吗？
var width = 700;
var height = 700;
var padding = 70;
var myData = [12, 15, 20, 9, 17, 25, 30];
var errData = [6, 7.5, 10, 4.5, 8.5, 12.5, 15];
var svg = d3.select("body").
浏览 10提问于2018-02-02得票数 1
回答已采纳
嗨，基本上svg坐标空间从顶部到bottom.what，我应该改变为从底部到顶部增长，就像图形坐标空间一样。下面的代码从上到下在左侧绘制我需要如何更改为从下到上
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
//Create and append line
svg.append("line")
.attr("x1
浏览 4提问于2017-08-29得票数 1
我已经创建了一个简化的的D3图表。我已经使用的解决方案使它响应(使用viewbox和preserveaspectratio)。
当我调整窗口的大小并使其变小时，一些网格线似乎正在消失并重新出现。我想这在小的决心上看来会很糟糕。320x480移动电话)。当窗口变小时，有没有办法保留我的网格线？
HTML代码：
<!--//d3 chart//-->
<div class="centre-div"></div>
CSS代码：
.centre-div {
margin: 0 auto;
max-width: 550px;
}
/* D3
浏览 2提问于2016-08-11得票数 6
回答已采纳
1回答
我正在使用D3创建一个用渐变填充的大对象，但是对象越大，渐变就越不平滑。以下是创建此类工件的代码示例：
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1">
<script type="text/javascript">
var w = 4000,
h = 100,
m = 50;
var svg = d3.select("body").append("svg:svg&
浏览 1提问于2012-11-17得票数 1
回答已采纳
我在d3中绘制了x轴和y轴。
var margin = {top: 20, right: 100, bottom: 30, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.linear()
.domain([0, 15])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, 38])
浏览 0提问于2015-09-10得票数 2
回答已采纳
1回答
我试图在一条被剪裁的小路上拖动一组形状。这是第一次，它工作良好，但当我开始拖动，剪裁根本不起作用。
这是我的工作代码；
var svg = d3.select("svg");
// draw a circle
svg.append("clipPath") // define a clip path
.attr("id", "clip") // give the clipPath an ID
.append("circle") // shape i
浏览 0提问于2019-09-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
