Question

我试图用JS完全控制d3.js Scatter Plot Matrix图表的样式而不使用CSS。我知道它的效率有点低，但我渲染的图表不止一个，它们都有不同的风格。有人可以告诉我这里我做错了什么，因为我的轴文本已经消失了。

JS Bin：

https://jsbin.com/siqewicizu/edit?js,output

参考代码：

var width = 960,
    size = 230,
    padding = 20;

var x = d3.scale.linear()
    .range([padding / 2, size - padding / 2]);

var y = d3.scale.linear()
    .range([size - padding / 2, padding / 2]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(6);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(6);

var color = d3.scale.category10();

var domainByTrait = {},
    traits = d3.keys(data[0]).filter(function(d) { return d !== "species"; }),
    n = traits.length;

traits.forEach(function(trait) {
  domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; });
});

xAxis.tickSize(size * n);
yAxis.tickSize(-size * n);

var svg = d3.select("body").append("svg")
    .attr("width", size * n + padding)
    .attr("height", size * n + padding)
    .append("g")
    .attr("transform", "translate(" + padding + "," + padding / 2 + ")");

svg.selectAll(".x.axis")
    .data(traits)
    .enter().append("g")
    .attr("class", "xAxis")
    .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; })
    .each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); });

svg.selectAll(".y.axis")
    .data(traits)
    .enter().append("g")
    .attr("class", "yAxis")
    .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
    .each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); });

svg.selectAll(".xAxis")
    .style("fill", "none");

svg.selectAll(".yAxis")
    .style("fill", "none")

svg.selectAll("line")
    .style("stroke", "#ddd")
    .style("shape-rendering", "crispEdges");

var cell = svg.selectAll(".cell")
    .data(cross(traits, traits))
    .enter().append("g")
    .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })
    .each(plot);

// Titles for the diagonal.
cell.filter(function(d) { return d.i === d.j; }).append("text")
    .attr("x", padding)
    .attr("y", padding)
    .attr("dy", ".71em")
    .style("font-weight", "bold")
    .style("text-transform", "capitalize")
    .style("font-family", "arial")
    .style("font-size", "10px")
    .text(function(d) { return d.x; });

function plot(p) {
  var cell = d3.select(this);

  x.domain(domainByTrait[p.x]);
  y.domain(domainByTrait[p.y]);

  cell.append("rect")
      .style("fill", "none")
      .style("stroke", "#aaa")
      .style("shape-rendering", "crispEdges")
      .attr("x", padding / 2)
      .attr("y", padding / 2)
      .attr("width", size - padding)
      .attr("height", size - padding);

  cell.selectAll("circle")
      .data(data)
      .enter().append("circle")
      .attr("cx", function(d) { return x(d[p.x]); })
      .attr("cy", function(d) { return y(d[p.y]); })
      .attr("r", 4)
      .style("fill-opacity", "0.7")
      .style("fill", function(d) { return color(d.species); });
}

function cross(a, b) {
  var c = [], n = a.length, m = b.length, i, j;
  for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
  return c;
}

Answer 1

您的轴文本已存在，但由于您已将填充设置为其父级中的none，因此它不会显示为继承。您可以在两个fill: none声明下面添加：

svg.selectAll(".xAxis text") .style("fill", "#000"); svg.selectAll(".yAxis text") .style("fill", "#000");

，结果是黑色的轴标签，如下所示： https://jsfiddle.net/MaryBartlett/jc4mp14s/

没有CSS的d3.js中的轴文本样式

1 个答案: