Question

我可以使用力图来实现这一点吗？

我有一个数据集，其中包含沿时间线出现的一系列对象：

letters
orders
memos
phone calls
twitter messages
invoices
emails

数据集中的对象数量由从数据库中提取相关对象的查询驱动。

在一个简单的例子中，单个日期可能有10个对象，或者10个可能分布在2或3天或相隔数周。

所有对象彼此链接，而不是直接链接。

A可能会加入B和C，但D只能通过指向C的链接链接到A.

链接需要根据链接类型进行颜色编码，并且线条厚度需要变化以表示链接的强度。

我有几种方法可以根据对象日期使用固定坐标显示此数据。他们做的工作，但他们看起来不太好。

我已经创建了一个D3力图，它绘制了对象（节点）并绘制了链接，但我完全不知道如何将时间元素包含在内。

有没有办法可以绘制数据，以便对象大致沿着日期线定位？这些位置不需要精确，但总体结果应该能够为用户提供良好的临近接近的指示。

我也喜欢用开放式B样条绘制的链接，这是我无法理解的其他内容

查看示例数据和代码。

JSON数据

{
  "nodes":  [
            { "DocID": "77304", "date": "2001-01-21", "Type": "L" },
            { "DocID": "65884", "date": "2001-01-26", "Type": "F" },
            { "DocID": "77005", "date": "2001-02-02", "Type": "L" },
            { "DocID": "66162", "date": "2001-02-07", "Type": "E" },
            { "DocID": "93085", "date": "2001-03-20", "Type": "L" },
            { "DocID": "93101", "date": "2001-03-21", "Type": "P" },
            { "DocID": "93118", "date": "2001-03-28", "Type": "L" },
            { "DocID": "75890", "date": "2001-04-09", "Type": "L" },
            { "DocID": "93189", "date": "2001-04-11", "Type": "L" },
            { "DocID": "93225", "date": "2001-04-12", "Type": "L" },
            { "DocID": "75535", "date": "2001-04-19", "Type": "L" },
            { "DocID": "74916", "date": "2001-05-07", "Type": "I" },
            { "DocID": "58259", "date": "2001-05-16", "Type": "L" },
            { "DocID": "93565", "date": "2001-05-16", "Type": "O" },
            { "DocID": "95504", "date": "2001-05-17", "Type": "O" },
            { "DocID": "74408", "date": "2001-05-21", "Type": "L" },
            { "DocID": "95521", "date": "2001-05-21", "Type": "L" },
            { "DocID": "74343", "date": "2001-05-22", "Type": "L" }
            ],

  "links":  [
            { "source":  0, "target":  5, "strength": 9,  "colour": 4  },
            { "source":  1, "target":  7, "strength": 4,  "colour": 3 },
            { "source":  2, "target": 17, "strength": 2,  "colour": 1 },
            { "source":  3, "target":  2, "strength": 3,  "colour": 2 },
            { "source":  4, "target":  8, "strength": 9,  "colour": 4 },
            { "source":  5, "target":  8, "strength": 5,  "colour": 3 },
            { "source":  6, "target":  2, "strength": 3,  "colour": 5 },
            { "source":  7, "target": 11, "strength": 5,  "colour": 1 },
            { "source":  8, "target": 12, "strength": 3,  "colour": 5 },
            { "source":  9, "target": 13, "strength": 9,  "colour": 4 },
            { "source": 10, "target":  9, "strength": 4,  "colour": 5 },
            { "source": 11, "target":  7, "strength": 5,  "colour": 2 },
            { "source": 12, "target": 11, "strength": 3,  "colour": 2 },
            { "source": 13, "target":  9, "strength": 3,  "colour": 5 },
            { "source": 14, "target":  9, "strength": 2,  "colour": 5 },
            { "source": 15, "target": 11, "strength": 3,  "colour": 5 },
            { "source": 16, "target":  9, "strength": 6,  "colour": 5 },
            { "source": 17, "target": 13, "strength": 4,  "colour": 5 },
            { "source":  1, "target": 14, "strength": 2,  "colour": 5 },
            { "source":  9, "target":  7, "strength": 2,  "colour": 5 },
            { "source":  2, "target":  5, "strength": 5,  "colour": 5 },
            { "source": 11, "target":  9, "strength": 7,  "colour": 1 }
            ]
}

JS代码

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(150)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("Resources/testData.json", function (error, graph) {
    if (error) throw error;

force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();

var link = svg.selectAll(".link")
  .data(graph.links)
    .enter().append("line")
    .style("stroke", function (d) { return color(d.colour); })
  .attr("class", "link")
     .style("stroke-width", function (d) { return d.strength; });

var node = svg.selectAll(".node")
  .data(graph.nodes)
.enter().append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .call(force.drag);

node.append("title")
  .text(function (d) { return d.DocID; });

force.on("tick", function () {
    link.attr("x1", function (d) { return d.source.x; })
    .attr("y1", function (d) { return d.source.y; })
    .attr("x2", function (d) { return d.target.x; })
    .attr("y2", function (d) { return d.target.y; });

    node.attr("cx", function (d) { return d.x; })
    .attr("cy", function (d) { return d.y; });
    });
});

我可以使用D3 Force Network的时间轴吗？

JSON数据

JS代码

0 个答案: