手机专利关系图揭秘苹果、三星、微软间的纠葛

前端

2023-10-09 13:38:45

用 D3.js 画一个手机专利关系图，窥探苹果、三星、微软间的纠葛

在专利诉讼频发的手机行业，掌握知识产权的主动权至关重要。从苹果、三星到微软，巨头们为了捍卫自己的专利，展开了一场又一场的争夺战。今天，我们就用 D3.js 来绘制一张手机专利关系图，一探究竟这背后的纠葛。

专利关系图背后的故事

这张关系图展示了手机行业中各大公司之间的专利诉讼关系。图中，节点代表公司，而边则代表专利诉讼。边上的粗细表示诉讼次数的多少，颜色则表示诉讼的结果（绿色为原告胜诉，红色为被告胜诉）。

绘制关系图

准备数据

绘制关系图的第一步是准备数据。我们的数据源是一个 JSON 文件，其中包含了各公司之间的专利诉讼信息。

{
  "nodes": [
    { "id": "Apple" },
    { "id": "Samsung" },
    { "id": "Microsoft" }
  ],
  "links": [
    { "source": "Apple", "target": "Samsung", "value": 5 },
    { "source": "Samsung", "target": "Microsoft", "value": 3 },
    { "source": "Microsoft", "target": "Apple", "value": 2 }
  ]
}

创建 SVG 画布

接下来，我们需要创建一个 SVG 画布来绘制关系图。

const svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 600);

绘制节点

然后，我们绘制图中的节点。

const nodes = svg.selectAll("circle")
  .data(data.nodes)
  .enter()
  .append("circle")
  .attr("r", 20)
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y)
  .attr("fill", "steelblue");

绘制边

最后，我们绘制图中的边。

const links = svg.selectAll("line")
  .data(data.links)
  .enter()
  .append("line")
  .attr("stroke-width", (d) => d.value)
  .attr("stroke", (d) => d.result === "plaintiff" ? "green" : "red")
  .attr("x1", (d) => d.source.x)
  .attr("y1", (d) => d.source.y)
  .attr("x2", (d) => d.target.x)
  .attr("y2", (d) => d.target.y);

添加图例

为了让关系图更易于理解，我们添加了一个图例。

const legend = svg.append("g")
  .attr("transform", "translate(20, 20)")
  .attr("font-size", "12px");

legend.append("circle")
  .attr("r", 5)
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("fill", "steelblue");

legend.append("text")
  .attr("x", 10)
  .attr("y", 5)
  .text("公司");

legend.append("line")
  .attr("x1", 0)
  .attr("y1", 20)
  .attr("x2", 50)
  .attr("y2", 20)
  .attr("stroke-width", 2)
  .attr("stroke", "green");

legend.append("text")
  .attr("x", 55)
  .attr("y", 25)
  .text("原告胜诉");

legend.append("line")
  .attr("x1", 0)
  .attr("y1", 40)
  .attr("x2", 50)
  .attr("y2", 40)
  .attr("stroke-width", 2)
  .attr("stroke", "red");

legend.append("text")
  .attr("x", 55)
  .attr("y", 45)
  .text("被告胜诉");