在这个平行坐标图中，您可以在末尾看到另一个轴，称为"物种"，但它没有连接到另一个轴。我想让它像在另一个轴中一样工作，但这不起作用，因为它具有非数字数据，因此没有连接。我想知道如何在 d3 中完成这项工作？
网页代码：
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
D3.js代码：
// set the dimensions and margins of the graph
var margin = {top: 30, right: 10, bottom: 10, left: 0},
width = 500 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {
// Extract the list of dimensions we want to keep in the plot. Here I keep all except the column called Species
dimensions = d3.keys(data[0]).filter(function(d) { return d })
// For each dimension, I build a linear scale. I store all in a y object
var y = {}
for (i in dimensions) {
name = dimensions[i]
y[name] = d3.scaleLinear()
.domain( d3.extent(data, function(d) { return +d[name]; }) )
.range([height, 0])
}
// Build the X scale -> it find the best position for each Y axis
x = d3.scalePoint()
.range([0, width])
.padding(1)
.domain(dimensions);
// The path function take a row of the csv as input, and return x and y coordinates of the line to draw for this raw.
function path(d) {
return d3.line()(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
// Draw the lines
svg
.selectAll("myPath")
.data(data)
.enter().append("path")
.attr("d", path)
.style("fill", "none")
.style("stroke", "#69b3a2")
.style("opacity", 0.5)
// Draw the axis:
svg.selectAll("myAxis")
// For each dimension of the dataset I add a 'g' element:
.data(dimensions).enter()
.append("g")
// I translate this element to its right position on the x axis
.attr("transform", function(d) { return "translate(" + x(d) + ")"; })
// And I build the axis with the call function
.each(function(d) { d3.select(this).call(d3.axisLeft().scale(y[d])); })
// Add axis title
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; })
.style("fill", "black")
})
感谢您的任何建议。
我知道我必须提取维度列表并为每个维度创建一个比例，但我无法成功做到这一点。 而不是为每个维度构建线性比例
// For each dimension, I build a linear scale. I store all in a y object
var y = {}
for (i in dimensions) {
name = dimensions[i]
y[name] = d3.scaleLinear()
.domain( d3.extent(data, function(d) { return +d[name]; }) )
.range([height, 0])
}
我想我需要这样的东西：
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
if(d === "name") return false;
if(d === "colour") {
y[d] = d3.scale.ordinal()
.domain(cars.map(function(p) { return p[d]; }))
.rangePoints([h, 0]);
}
else {
y[d] = d3.scale.linear()
.domain(d3.extent(cars, function(p) { return +p[d]; }))
.range([h, 0]);
}
return true;
}));
但是当我编辑它时它不起作用。
对于每个数据项，将"物种"值替换为数字：
let keys = {}
let counter = 0
data.forEach(item => {
const species = item.Species;
let key = 0;
if(keys.hasOwnProperty(species))
key = keys[species];
else {
key = ++counter;
keys[species] = key;
}
item.Species = key;
})
在小提琴中查看结果