小编And*_*eid的帖子

修复D3强制定向布局中的节点位置

我希望我的力导向布局中的一些节点忽略力并基于节点的属性保持在固定位置,同时仍然能够被拖动并在其他节点上施加排斥并保持其链接线.我觉得它会像这样简单:

force.on("tick", function() {
    vis.selectAll("g.node")
        .attr("transform", function(d) {
            return (d.someAttribute == true) ?
               "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" :
               "translate(" + d.x + "," + d.y + ")"
        });
  });
Run Code Online (Sandbox Code Playgroud)

我还尝试手动设置节点的x和y属性on-tick,但是如果受到力的影响,链接将继续浮动到节点所在的位置.

显然我对这应该如何工作有一个基本的误解,所以有人可以指出一个例子,其中一些节点固定在它们的位置(但仍然是可拖动的),其余的节点是围绕力导向的,并且所有链接仍在工作?

javascript data-visualization d3.js force-layout d3-force-directed

65
推荐指数
2
解决办法
4万
查看次数

如何在带有注释的MyBatis中使用动态SQL查询(如何使用selectProvider)?

我试图避免使用额外的xml来定义mybatis3中的映射器.注释适合于.

我对@ SelectProvider/@ InsertProvider /等的使用感到有点困惑.不要以为网上有很多资源可以指导我完成这项工作.

基本上,我想在mybatis3中找到替代的注释版本.

例如,我有一个xml映射器,我想将其转换为使用注释

<select ...>
  <where>
    <if cause.....>
    </if>
    <if cause......>
    </if>
  </where>
</select>
Run Code Online (Sandbox Code Playgroud)

任何人都可以提供包含代码的具体答案/解决方案吗?

提前致谢!

mapping orm annotations mybatis

17
推荐指数
2
解决办法
2万
查看次数

d3.js中svg和canvas之间的区别

我是d3.js的新手.我想通过两种方法来绘制对象 - SVG和Canvas. 我的用例大约是<100个节点和边缘.我已经尝试过几个使用canvas的例子,它看起来很棒.

我看到有关于SVG和Canvas之间差异的SO帖子.

两者似乎都适合我使用,但是,我倾向于画布(因为我已经很少有例子工作).如果我在d3.js上下文中遗漏任何内容,请纠正我吗?

svg canvas d3.js

12
推荐指数
1
解决办法
5940
查看次数

缩放d3 v4地图以适合SVG(或根本不适合)

我试图让这个美国规模的地图变小.要么是我的SVG,要么是手动.

这是我最简单的代码:

function initializeMapDifferent(){
    var svg = d3.select("#map").append("svg")
        .attr("width", 1000)
        .attr("height", 500);



    d3.json("https://d3js.org/us-10m.v1.json", function (error, us){

        svg.append("g")
            .attr("class", "states")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.states).features)
            .enter().append("path")
            .attr("fill", "gray")
            .attr("d", d3.geoPath());
    });
}
Run Code Online (Sandbox Code Playgroud)

我尝试过类似的东西:

  var path = d3.geoPath()
  .projection(d3.geoConicConformal()
      .parallels([33, 45])
      .rotate([96, -39])
      .fitSize([width, height], conus));
Run Code Online (Sandbox Code Playgroud)

但每次我在路径变量中添加任何东西时,我都会从D3的内部部分得到NAN错误.谢谢你的帮助!

javascript svg geojson d3.js topojson

11
推荐指数
1
解决办法
2926
查看次数

如何在D3中旋转图形?

任务是使用类似PowerPoint的d3旋转图形:

在此处输入图片说明

得到了这个示例,试图实现相同的行为。无法理解,错误出在哪里-人物在晃动,没有按照应有的方式旋转。

  function dragPointRotate(rotateHandleStartPos) {

    rotateHandleStartPos.x += d3.event.dx;
    rotateHandleStartPos.y += d3.event.dy;

    const updatedRotateCoordinates = r

    // calculates the difference between the current mouse position and the center line
    var angleFinal = calcAngleDeg(
      updatedRotateCoordinates,
      rotateHandleStartPos
    );
    // gets the difference of the angles to get to the final angle
    var angle =
      rotateHandleStartPos.angle +
      angleFinal -
      rotateHandleStartPos.iniAngle;

    // converts the values to stay inside the 360 positive
    angle %= 360;
    if (angle < 0) {
      angle += 360;
    } …
Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js

7
推荐指数
1
解决办法
160
查看次数

d3js追加div

我试图在节点旁边添加一些弹出消息,但它看起来像其他任何东西然后文本svg和图像不能显示附加.

  node.append("text")
      .attr("dx", 16)
      .attr("dy", ".0em")
      .text(function(d) { return d.name });
Run Code Online (Sandbox Code Playgroud)

工作并添加文本,但我试图添加一个div,它不可见,node.append("div").这里有什么我想念的吗?我怎样才能轻松获得节点的位置,以便我可以将属性传递给另一个元素.

d3.js

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

具有平滑渐变和相应标签的图例

我正在为一些数据创建一个传奇.

这是我的代码:Plunker.

问题是标签沿x轴线均匀分布,同时它们应遵循色标方案:

var colorScale = d3.scaleLinear()
   .domain([0, 10, 15, 20, 25, 100])
   .range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);
Run Code Online (Sandbox Code Playgroud)

这是我有的:

在此输入图像描述

这就是我想要的:

在此输入图像描述

谢谢!

data-visualization d3.js

6
推荐指数
1
解决办法
907
查看次数

“d3.translateExtent”坐标如何工作?

jsfiddle演示

我正在尝试向圆圈添加拖动并尝试应用 translateExtent。那么如何将拖动边界限制为矩形。?

var height = 500;
var width = 500;


//if extent is specified, sets the translate extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner of the world and [x1, y1] is the bottom-right corner of the world, and returns this zoom behavior. 
var zoom = d3.zoom()
   .translateExtent([[100, 100], [400, 400]])
    .on("zoom", zoomed);

    // Feel free to change or delete any of the code you see in this editor! …
Run Code Online (Sandbox Code Playgroud)

javascript zooming d3.js

6
推荐指数
1
解决办法
4072
查看次数

D3 - 如何在数据值更改时更新力模拟

我在 D3 中遇到了一个关于力模拟的小问题。

我有代表每个国家从 1998 年到 2008 年的贫困率的数据。这是一个气泡图,分为三个集群,分别代表贫困国家、非贫困国家和没有信息的国家。

最初加载应用程序时,它会加载 1998 年的数据。但是,我在顶部有一些按钮,点击后会改变年份,随后气泡应该重新排列。我所能做的就是,当单击按钮时,我更改了一个变量year。但是,在year整个代码中都使用了一些函数和变量。当year发生变化时,我想重新计算所有依赖的节点属性和力参数year

这是我的代码。如果您想尝试一下,我已经包含了所有内容。数据文件在这篇文章的末尾。

 async function init() {
    // Set up the canvas
    var height = 1000,  width = 2000;
    var svg = d3.select("#panel1").append("svg")
        .attr("height", height)
        .attr("width", width)
        .attr("class", "bubblePanel");

    var canvas = svg.append("g")
        .attr("transform", "translate(0,0)");

    // Choose what year to look at, based on button clicks.
    var year = "X1998"
    d3.select("#b1998").on("click", function() { 
        year = "X1998"
        console.log(year)
        // NOTIFY SIMULATION OF CHANGE //
    }) …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js force-layout

6
推荐指数
1
解决办法
3413
查看次数

d3地图上的线未形成曲线

我已经使用d3.js创建了地图。我想在两个位置之间显示一条曲线。我能够显示一条线,但是有时它不能形成一条完美的曲线。对于某些线,这些线在地图后面(穿过子午线)弯曲到目的地。

这是演示问题的代码笔:https : //codepen.io/peeyush-pant/pen/WqbPax

还有一张图片:

在此处输入图片说明

这是我的投影数据:

var projection = d3.geoEquirectangular();

var path = d3.geoPath()
  .projection(projection);

Run Code Online (Sandbox Code Playgroud)

这是我的界线:

  arcGroup.selectAll("myPath")
    .data(links)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("id", function (d, i) {
      return "line" + i;
    })
    .attr("d", function (d) {
      return path(d)
    })
    .style("fill", "none")
    .style("stroke", '#fff787')
    .style("stroke-width", 1.5);
Run Code Online (Sandbox Code Playgroud)

谢谢。

javascript d3.js d3.geo

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