Question

我没有要显示的代码 - 我不知道从哪里开始。那是我的问题。通常我会捣乱很久，我已经完成了。但是 - 我在编码方面是一个菜鸟，所以对我来说很难（有点）。

我知道D3如何运作，基础知识。我可以创建一些带有类别或范围的简单colorScales。我想做的是以下内容。

我的图表上的每个点或条或线都是某种颜色，取决于我的JSON文件中“键”的“值”。

e.g。 “Supplier_name”：“FLYBE BRITISH EUROPEAN” 将等同于紫色例如“Supplier_name”：“EASYJET” 将等同于Orange

依此类推。

我是否创建了一个新的JSON数组，其中包含一个对象，其中列出了每个供应商的名称以及我添加的相关颜色作为其值？像this

这样的东西

我不知道该怎么做：（!!!!!

Answer 1

只需将具有所需颜色值的属性添加到数据中（在您的情况下为JSON文件），然后将颜色应用于元素。就像你应用任何其他属性一样。

这是一个例子。

＆＃13;

var margin        = { top: 50, right: 50, bottom: 50, left: 50}, 
    w             = 300 - margin.left - margin.right,
    h             = 600 - margin.top - margin.bottom,
    circleRadii   = 15,
    // add colors to your data
    circleData    = [{x: 10, y: 10, c: "yellow"}, {x: 50, y: 80, c: "green"}, {x: 90, y: 10, c: "red"}];

var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var circles = svg.selectAll("circle")
.data(circleData)
.enter()
.append("circle");

var circleAttr = circles
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", circleRadii)
// apply your color from the dataset
.style("fill", function (d) { return d.c; });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

D3：通过键的值在图形上着色“元素”

1 个答案: