1

我有一个按部门包含法国人口的 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 线）
  • 我无法选择轴中值的数量，我希望在每个色块的开头都有一个。

提前感谢您的帮助。

4

2 回答 2

2

您的解决方案未显示“连字符”（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; }

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

希望这可以帮助！

于 2013-09-11T13:43:36.997 回答
0

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

于 2013-09-11T14:05:03.163 回答