Question

我有一个CSV文件，其中包含按部门划分的法语人口。我可以正确显示有人口密度的地图，但我遇到相关图例的问题。

您可以在此处查看当前结果：http://i.stack.imgur.com/Y26JT.jpg

加载CSV后，这是我添加图例的代码：

legend = svg.append('g')
    .attr('transform', 'translate(525, 150)')
    .attr('id', 'legend');

legend.selectAll('.colorbar')
    .data(d3.range(9))
    .enter().append('svg:rect')
    .attr('y', function(d) { return d * 20 + 'px'; })
    .attr('height', '20px')
    .attr('width', '20px')
    .attr('x', '0px')
    .attr("class", function(d) { return "q" + d + "-9"; })
    .attr('stroke', 'none');

legendScale = d3.scale.linear()
    .domain([0, d3.max(csv, function(e) { return +e.POP; })])
    .range([0, 9 * 20]);

legendAxis = d3.svg.axis()
    .scale(legendScale)
    .orient('right')
    .tickSize(1);       

legendLabels = svg.append('g')
    .attr('transform', 'translate(550, 150)')
    .attr('class', 'y axis')
    .call(legendAxis);

使用ColorBrewer CSS（https://github.com/mbostock/d3/tree/master/lib/colorbrewer）

获取颜色

我有两个问题：

对于轴的每个值，不显示连字符' - '（SVG行）
我无法选择轴上的数值，我希望每个颜色块的开头都有一个。

提前感谢您的帮助。

Answer 1

你的解决方案没有显示'连字符'（svg行）的原因是因为你将tickSize设置得非常小。尝试不设置它，默认为6（根据API文档 - https://github.com/mbostock/d3/wiki/SVG-Axes）。

要选择轴中的值数，可以添加对“.ticks（N）”的调用，其中N是您想要的刻度数。 D3将尝试显示许多刻度。您也可以调用“.tickValues（[...]）”并传入确切的数组值以用于刻度。

这是一个用于纠正示例中问题的JSFiddle：http://jsfiddle.net/TRkGK/3/

以及解决问题的部分示例：

var legendAxis = d3.svg.axis()
   .scale(legendScale)
   .orient('right')
   .tickSize(6) // Tick size controls the width of the svg lines used as ticks
   .ticks(9); // This tells it to 'try' to use 9 ticks

更新：

您还需要确保正确设置CSS。这是我使用的：

.y.axis line {  stroke: #ccc; }
.y.axis path {  display: none; }

在您的示例中，当您添加较大的tickSize时，您将看到定义刻度线的路径。如果隐藏路径并为线条指定颜色，则会看到刻度线而不是定义刻度线的区域。

希望这有帮助！

Answer 2

看起来它可能是一个css问题，你看到他的小提琴中的reblace的css吗？

D3 - 垂直轴未正确显示

2 个答案: