小编jam*_*rth的帖子

计算d3路径中的弧/点

我正在努力找出正确的几何形状,以找到沿弧线的路径的中点.假设我有两点:x1,y1和x2,y2.如下所示:

弧

x1,y1是A. x2,y2是B.

我试着写一个函数,我可以在上面的图像中提供距离(-1或1),它返回x和y坐标.这样我可以在路径中添加一个中间点来渲染下面的行:

弧

[更新]

你必须使用x和y im寻找的线条图的角度.下面显示的是45度线,三角形的一边是5,一边是1.从那里,你可以计算x和y.

弧

我想我用下面的代码想出来并且 小提琴例子:

var svgContainer = d3.select("#canvas").append("svg")
                                       .attr("width", 400)
                                       .attr("height", 400);

var lineData = [ { "x": 0,   "y": 0},  { "x": 100,  "y": 100}];

var midPoint = {
    x:Math.abs(lineData[1].x - lineData[0].x)/2,
    y:Math.abs(lineData[1].x - lineData[0].x)/2
};

function calcAngle(x1, x2, y1, y2) {
    var calcAngleVal = Math.atan2(x1-x2,y1-y2)*(180/Math.PI);

    if (calcAngleVal < 0) {
        calcAngleVal = Math.abs(calcAngleVal);
    } else{
        calcAngleVal = 360 - calcAngleVal;
    }

    return calcAngleVal;
}

var angle = calcAngle(lineData[0].x, lineData[1].x,lineData[0].y,lineData[1].y);


var sin = …
Run Code Online (Sandbox Code Playgroud)

javascript math geometry d3.js

5
推荐指数
1
解决办法
3745
查看次数

找不到Docker nodejs

当我docker build -t example .在下面运行我得到一个错误

FROM ruby:2.1
RUN rm /bin/sh && ln -s /bin/bash /bin/sh
ENV NVM_DIR /usr/local/nvm
ENV NODE_VERSION 4.4.2

RUN curl https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash \
  && source $NVM_DIR/nvm.sh \
  && nvm install $NODE_VERSION \
  && nvm alias default $NODE_VERSION \
  && nvm use default


ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
ENV PATH      $NVM_DIR/v$NODE_VERSION/bin:$PATH

RUN node -v
Run Code Online (Sandbox Code Playgroud)

我收到以下错误:

步骤9:运行节点-v --->在6e3fac36d2fc/bin/sh中运行:找不到命令:命令'/ bin/sh -c node -v'返回非零代码:127

无法理解为什么路径中找不到节点.我也试过执行nvm.sh文件,但它没有效果.

node.js docker

3
推荐指数
1
解决办法
1524
查看次数

D3平移+缩放约束

我正在尝试在平移和缩放时从svg边界外部缩放/切换矩形.我试图基于这个例子来实现它,但我似乎无法让它工作.我创建了这个jsfiddle只有可缩放和可拖动的矩形.再次,我试图使它不能拖动svg框外面的矩形我把边框.我知道我需要更新移动功能.下面的代码来自第一个链接示例,但它似乎不能很好地工作,所以我评论了它的一部分.

function move() {
  var t = d3.event.translate,
  s = d3.event.scale;

  //t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
  //t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
  //zoom.translate(t);
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
Run Code Online (Sandbox Code Playgroud)

编辑:所以另外我需要能够在你一直放大并且比svg更大的时候拖动矩形.在下图中,蓝色矩形是svg,绿色将是矩形,您将一直放大,以便绿色矩形比SVG占用更多.这类似于约束缩放示例中的地图.您可以放大状态并在全国范围内拖动,导航到当前svg大小之外的状态

例

svg d3.js

2
推荐指数
1
解决办法
2098
查看次数

标签 统计

d3.js ×2

docker ×1

geometry ×1

javascript ×1

math ×1

node.js ×1

svg ×1