草庐IT

javascript - 用给定的点延长线

coder 2024-12-09 原文

我用图表中的点绘制了几条线，看起来像下面张贴的图片中的那条线: 比方说，我有 A 点和 B 点的坐标，我用它来设置线。我想要做的是让这条线从 x=0 一直延伸到 x=100，添加两个缺失的“x”部分。 我正在使用 d3.svg.line() 来设置 .x 和 .y 访问器函数，然后是绘制路径线。是否有一个函数可以添加到行或路径生成器中来实现我想要获得的功能？ 感谢任何提示，谢谢!

最佳答案

没有内置的方法可以做到这一点，但自己计算并不难。

假设您当前正在 A 和 B 之间画线，如下所示:

var A = [15, 40], // x of 15 and y of 40
    B = [85, 90],
    line = d3.svg.line();

path.attr('d', line([A,B]))

您需要在 x 为 0 和 100 时计算 p0 和 p1，同时考虑直线的斜率和直线穿过的点。因此，您需要一个函数 pointAtX()，它将 A 和 B 以及所需的 x 坐标作为参数，并返回适当的 y 坐标。

function pointAtX(a, b, x) {
  var slope = (b[1] - a[1]) / (b[0] - a[0])
  var y = a[1] + (x - a[0]) * slope
  return [x, y]
}

然后你可以这样画线:

var A = [15, 40], // x of 15 and y of 40
    B = [85, 90],
    line = d3.svg.line(),
    p0 = pointAtX(A, B, 0),
    p1 = pointAtX(A, B, 100),

path.attr('d', line([p0,p1]))

有趣的是，pointAtX() 的实现可以重写以利用 d3.scale.linear。不确定它是否更好，但有点酷:

var interpolator = d3.scale.linear()
function pointAtX(a, b, x) {
  interpolator
    .domain([a[0], b[0]])
    .range([a[1], b[1]]);
  return [x, interpolator(x)];
}

关于javascript - 用给定的点延长线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21168599/

延长线给定codesectionpointAtXjavascriptsvgd3.jsline

有关javascript - 用给定的点延长线的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - 如果满足给定条件，则结束 ruby​​ 程序 - 2

    基本上，我只是试图在满足特定条件时停止程序运行其余行。unlessraw_information.firstputs"Noresultswerereturnedforthatquery"breakend然而，在程序运行之前我得到了这个错误:Invalidbreakcompileerror(SyntaxError)执行此操作的正确方法是什么？ 最佳答案 abort("Noresultswerereturnedforthatquery")unlesscondition或unlessconditionabort("Noresultswer

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. ruby - 如何计算自 Ruby 中给定日期以来的周数？ - 2

    目标我正在尝试计算自给定日期以来周的距离，而无需跳过任何步骤。我更喜欢用普通的Ruby来做，但ActiveSupport无疑是一个可以接受的选择。我的代码我写了以下内容，这似乎可行，但对我来说似乎还有很长的路要走。require'date'DAYS_IN_WEEK=7.0defweeks_sincedate_stringdate=Date.parsedate_stringdays=Date.today-dateweeks=days/DAYS_IN_WEEKweeks.round2endweeks_since'2015-06-15'#=>32.57ActiveSupport的#weeks

  5. ruby - 根据给定顺序对数字数组进行排序 - 2

    我有两个数组。第一个数组包含排序顺序。第二个数组包含任意数量的元素。我的属性是保证第二个数组中的所有元素(按值)都在第一个数组中，而且我只处理数字。A=[1,3,4,4,4,5,2,1,1,1,3,3]Order=[3,1,2,4,5]当我对A进行排序时，我希望元素按照Order指定的顺序出现:[3,3,3,1,1,1,1,2,4,4,4,5]请注意，重复是公平的游戏。A中的元素不应更改，只能重新排序。我该怎么做？ 最佳答案 >>source=[1,3,4,4,4,5,2,1,1,1,3,3]=>[1,3,4,4,4,5,2,1,1

  6. 【自动驾驶环境感知项目】——基于Paddle3D的点云障碍物检测 - 2

    文章目录1.自动驾驶实战：基于Paddle3D的点云障碍物检测1.1环境信息1.2准备点云数据1.3安装Paddle3D1.4模型训练1.5模型评估1.6模型导出1.7模型部署效果附录show_lidar_pred_on_image.py1.自动驾驶实战：基于Paddle3D的点云障碍物检测项目地址——自动驾驶实战：基于Paddle3D的点云障碍物检测课程地址——自动驾驶感知系统揭秘1.1环境信息硬件信息CPU:2核AI加速卡:v100总显存:16GB总内存:16GB总硬盘:100GB环境配置Python:3.7.4框架信息框架版本:PaddlePaddle2.4.0（项目默认框架版本为2.3

  7. ruby-on-rails - 给定长度的完全随机标识符 - 2

    我想生成一个包含数字、字母和特殊字符的给定(长度可能不同)长度的完全随机的“唯一”(我将确保使用我的模型)标识符例如:161551960578281|2.AQAIPhEcKsDLOVJZ.3600.1310065200.0-514191032|有人可以建议在RubyonRails中最有效的方法吗？编辑:重要:如果可能，请评论您提出的解决方案的效率，因为每次用户进入网站时都会使用它!谢谢 最佳答案 将其用于访问token与UUID不同。您不仅需要伪随机性，而且还需要加密安全PRNG.如果您真的不关心您使用的是什么字符(它们不会增加任何

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

随机推荐