Javascript d3-平行坐标图图例未显示
我有一张平行坐标图。我想显示一个图例。根据博斯托克网站上的例子，我写了一些类似的东西。但是，我只能看到显示的线条的颜色，而看不到文字。 文本也被正确返回。 我表现不正确的原因是什么 这是我的密码：Javascript d3-平行坐标图图例未显示,javascript,d3.js,Javascript,D3.js,我有一张平行坐标图。我想显示一个图例。根据博斯托克网站上的例子，我写了一些类似的东西。但是，我只能看到显示的线条的颜色，而看不到文字。 文本也被正确返回。 我表现不正确的原因是什么 这是我的密码： <!DOCTYPE html> <meta charset="utf-8"> <style> svg { font: 10px sans-serif; } .background path { fill: none; stroke: #ddd;
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ddd;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
stroke: steelblue;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
cursor: move;
}
.legend rect {
fill:white;
stroke:black;
opacity:0.8;}
</style>
<body>
<div style="width:1140px; height:550px;margin-left:50px;margin-top:50px;" id="chartDiv"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.5.0/d3-legend.js"></script>
<script>
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([0, width], 1),
y = {},
dragging = {};
var line = d3.svg.line(),
axis = d3.svg.axis().orient("left"),
background,
foreground;
var svg = d3.select("#chartDiv").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 + ")");
var color = d3.scale.ordinal()
.domain(['white','other','african-american','hispanic','asian/pacific islander'])
.range(['#ffae19','#4ca64c','#4682B4','#737373', '#ff4c4c']);
d3.csv("SurvivalProbability.csv", function(error, cars) {
// Extract the list of dimensions and create a scale for each.
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
if(d === "Ethnicity") {
y[d] = d3.scale.ordinal()
.domain(cars.map(function(p) { return p[d]; }))
.rangePoints([height, 0]);
}
else if(d === "Site") {
y[d] = d3.scale.ordinal()
.domain(cars.map(function(p) { return p[d]; }))
.rangePoints([height, 0]);
}
else if(d === "Tcategory") {
y[d] = d3.scale.ordinal()
.domain(cars.map(function(p) { return p[d]; }))
.rangePoints([height, 0]);
}
else if(d === "Nodal_Disease") {
y[d] = d3.scale.ordinal()
.domain(cars.map(function(p) { return p[d]; }))
.rangePoints([height, 0]);
}
else if(d === "Chemotherapy") {
y[d] = d3.scale.ordinal()
.domain(cars.map(function(p) { return p[d]; }))
.rangePoints([height, 0]);
}
else if(d === "Local_Therapy") {
y[d] = d3.scale.ordinal()
.domain(cars.map(function(p) { return p[d]; }))
.rangePoints([height, 0]);
}
else {
y[d] = d3.scale.linear()
.domain(d3.extent(cars, function(p) { return +p[d]; }))
.range([height, 0]);
}
return true;
}));
// Add grey background lines for context.
background = svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
/*foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);*/
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path)
.style("stroke", function(d) {
return color(d.Ethnicity);
})
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return {x: x(d)}; })
.on("dragstart", function(d) {
dragging[d] = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("dragend", function(d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) {
d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brushstart", brushstart).on("brush", brush));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
var legendRectSize = 10;
var legendSpacing = 100;
var legend = d3.select('svg')
.append("g")
.selectAll("g")
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize;
var x = 925;
var y = (i * height) + 50;
return 'translate(' + x + ',' + y + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
});
function position(d) {
var v = dragging[d];
return v == null ? x(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }));
}
function brushstart() {
d3.event.sourceEvent.stopPropagation();
}
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
extents = actives.map(function(p) { return y[p].brush.extent(); });
foreground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
}
</script>
svg{
字体：10px无衬线；
}
.背景路径{
填充：无；
行程：#ddd；
形状渲染：边缘清晰；
}
.前景路径{
填充：无；
笔画：钢蓝；
}
.刷{
填充不透明度：.3；
冲程：#fff；
形状渲染：边缘清晰；
}
.轴线，
.轴路径{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.轴文本{
文本阴影：01px0#fff，1px0#fff，0-1px0#fff，-1px0#fff；
光标：移动；
}
.图例矩形{
填充物：白色；
笔画：黑色；
不透明度：0.8；}
var margin={顶部：30，右侧：10，底部：10，左侧：10}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）.rangePoints（[0，宽度]，1），
y={}，
拖动={}；
var line=d3.svg.line（），
axis=d3.svg.axis（）.orient（“左”），
背景,，
前景；
var svg=d3.选择（#chartDiv”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var color=d3.scale.ordinal（）
.domain（[‘白人’、‘其他’、‘非裔美国人’、‘西班牙裔’、‘亚洲/太平洋岛民’]））
.range（['#ffae19'、'#4ca64c'、'#4682B4'、'#737373'、'#ff4c4c']）；
d3.csv（“SurvivalProbability.csv”，函数（错误，cars）{
//提取尺寸列表并为每个尺寸创建比例。
x、 域（维度=d3.键（车[0]）过滤器（函数（d）{
如果（d==“种族”）{
y[d]=d3.刻度.序数（）
.domain（cars.map（函数（p）{返回p[d]；}））
.范围点（[高度，0]）；
}
否则，如果（d==“现场”）{
y[d]=d3.刻度.序数（）
.domain（cars.map（函数（p）{返回p[d]；}））
.范围点（[高度，0]）；
}
else if（d==“t类别”）{
y[d]=d3.刻度.序数（）
.domain（cars.map（函数（p）{返回p[d]；}））
.范围点（[高度，0]）；
}
否则如果（d==“淋巴结疾病”）{
y[d]=d3.刻度.序数（）
.domain（cars.map（函数（p）{返回p[d]；}））
.范围点（[高度，0]）；
}
else if（d==“化疗”）{
y[d]=d3.刻度.序数（）
.domain（cars.map（函数（p）{返回p[d]；}））
.范围点（[高度，0]）；
}
否则如果（d==“局部治疗”）{
y[d]=d3.刻度.序数（）
.domain（cars.map（函数（p）{返回p[d]；}））
.范围点（[高度，0]）；
}
否则{
y[d]=d3.刻度.线性（）
.domain（d3.extent（cars，函数（p）{return+p[d]；}））
.范围（[高度，0]）；
}
返回true；
}));
//为上下文添加灰色背景线。
background=svg.append（“g”）
.attr（“类别”、“背景”）
.selectAll（“路径”）
.数据（车辆）
.enter（）.append（“路径”）
.attr（“d”，路径）；
//添加蓝色前景线作为焦点。
/*前台=svg.append（“g”）
.attr（“类”、“前景”）
.selectAll（“路径”）
.数据（车辆）
.enter（）.append（“路径”）
.attr（“d”，路径）*/
前台=svg.append（“g”）
.attr（“类”、“前景”）
.selectAll（“路径”）
.数据（车辆）
.enter（）.append（“路径”）
.attr（“d”，路径）
.样式（“笔划”，功能（d）{
返回颜色（d.d）；
})
//为每个维度添加一个组元素。
var g=svg.selectAll（“.dimension”）
.数据（尺寸）
.enter（）.append（“g”）
.attr（“类别”、“维度”）
.attr（“transform”，函数（d）{return”translate（“+x（d）+”）；}）
.call（d3.behavior.drag（））
.origin（函数（d）{return{x:x（d）}；}）
.on（“dragstart”，功能（d）{
拖动[d]=x（d）；
背景属性（“可见性”、“隐藏”）；
})
.开启（“拖动”，功能（d）{
拖动[d]=Math.min（宽度，Math.max（0，d3.event.x））；
attr（“d”，路径）；
维数.排序（函数（a，b）{返回位置（a）-位置（b）；}）；
x、 领域（维度）；
g、 attr（“transform”，函数（d）{return“translate”（+position（d）+”）；}）
})
.on（“dragend”，功能（d）{
删除拖动[d]；
转换（d3.select（this））.attr（“transform”、“translate”（+x（d）+”）；
过渡（前景）.attr（“d”，路径）；
背景
.attr（“d”，路径）
.transition（）
.延迟（500）
.持续时间（0）
.attr（“可见性”，空）；
}));
//添加轴和标题。
g、 附加（“g”）
.attr（“类”、“轴”）
.each（函数（d）{d3.select（this.call）（轴刻度（y[d]）；}）
.append（“文本”）
.style（“文本锚定”、“中间”）
.attr（“y”，-9）
.text（函数（d）{return d；}）；
//为每个轴添加并存储笔刷。
g、 附加（“g”）
.attr（“类”、“刷”）
.每个功能（d）{
d3.select（this）.call（y[d].brush=d3.svg.brush（）.y（y[d]）.on（“brushstart”，brushstart）.on（“brush”，brush））；
})
.selectAll（“rect”）
.attr（“x”，-8）
.attr（“宽度”，16）；
变量legendRectSize=10；
var legendSpacing=100；
变量图例=d3。选择（'svg'）
.附加（“g”）
.全选（“g”）
.data（color.domain（））
.输入（）
.append（'g'）
.attr（'类'，'图例'）
.attr（'transform'，函数（d，i）{
变量高度=legendRectSize；
var x=925；
变量y=（i*高度）+50；
返回“translate”（“+x+”、“+y+”）”；
});
图例.append（'rect'）
.attr（'width'，legendRectSize）
.attr（'height'，legendRectSize）
.style（'填充'，颜色）
.style（'stroke'，co
//rightmargin is set to 200
var margin = {top: 30, right: 200, bottom: 10, left: 10},
width = 1100 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var legendRectSize = 10;
var legendSpacing = 10;
var legend = d3.select('svg')
.append("g")
.selectAll("g")
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize;
var x = 900;
var y = (i * height) + 50;
return 'translate(' + x + ',' + y + ')';
});