我试图将
parallel coordinates example“翻译”到d3 v4的新版本.我有一个这个javascript的工作示例(如果有人试图使用d3的v4并且新功能有问题,这也是一个很好的例子):
var margin = {top: 30,right: 10,bottom: 10,left: 10},width = 600 - margin.left - margin.right,height = 200 - margin.top - margin.bottom; var x = d3.scaleBand().rangeRound([0,width]).padding(1),y = {},dragging = {}; var line = d3.line(),//axis = d3.axisLeft(x),background,foreground,extents; var svg = d3.select("#body").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 + ")"); d3.csv("cars.csv",function(error,cars) { // Extract the list of dimensions and create a scale for each. //cars[0] contains the header elements,then for all elements in the header //different than "name" it creates and y axis in a dictionary by variable name x.domain(dimensions = d3.keys(cars[0]).filter(function(d) { if(d == "name") { return false; } return y[d] = d3.scaleLinear() .domain(d3.extent(cars,function(p) { return +p[d]; })) .range([height,0]); })); extents = dimensions.map(function(p) { return [0,0]; }); // 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); // 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.drag() .subject(function(d) { return {x: x(d)}; }) .on("start",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("end",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(d3.axisLeft(y[d]));}) //text does not show up because prevIoUs line breaks somehow .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.brushY().extent([[-8,0],[8,height]]).on("brush start",brushstart).on("brush",brush_parallel_chart)); }) .selectAll("rect") .attr("x",-8) .attr("width",16); }); 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_parallel_chart() { for(var i=0;i<dimensions.length;++i){ if(d3.event.target==y[dimensions[i]].brush) { extents[i]=d3.event.selection.map(y[dimensions[i]].invert,y[dimensions[i]]); } } foreground.style("display",function(d) { return dimensions.every(function(p,i) { if(extents[i][0]==0 && extents[i][0]==0) { return true; } return extents[i][1] <= d[p] && d[p] <= extents[i][0]; }) ? null : "none"; }); }
一切正常(刷在每个轴上,改变轴的顺序……),除了每个轴顶部的标签没有显示,即使附加了文本标签并且文本写在tag(可以通过使用浏览器检查生成的html来检查).我相信负责这个的代码就是这个部分,但我无法找到发生这种情况的原因:
g.append("g") .attr("class",-9) .text(function(d) { return d; });
解决方法
在D3 v4中,轴组件将在其所要求的选择上明确地将填充设置为无.从
source code:
selection.filter(entering) .attr("fill","none") // <=== Fill set to none by D3 .attr("font-size",10) .attr("font-family","sans-serif") .attr("text-anchor",orient === right ? "start" : orient === left ? "end" : "middle");
这将创建以下代码:
< text>元素将继承这些属性,因为它们是这些组的子元素,从而隐藏文本.
>通过CSS:
.axis text { fill:black; /* <== Set the fill */ text-shadow: 0 1px 0 #fff,1px 0 0 #fff,0 -1px 0 #fff,-1px 0 0 #fff; cursor: move; }
工作demo.
>通过在< text>上设置fill属性元素本身:
.append("text") .attr("fill","black") // <=== Set the fill // .style("fill","black") // Will also work when using .style() .style("text-anchor","middle") .attr("y",-9) .text(function(d) { return d; });
工作demo.