我试图将
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; });
解决方法@H_502_12@
在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.
- 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.