相关疑难解决方法(0)

我在向d3js图表添加图表图例时遇到问题.这是我目前的做法:

var legend = svg.append("g")
  .attr("class", "legend")
  .attr("x", w - 65)
  .attr("y", 25)
  .attr("height", 100)
  .attr("width", 100);

legend.append("rect")
  .attr("x", w - 65)
  .attr("y", 25)
  .attr("width", 10)
  .attr("height", 10)
  .style("fill", function(d) { return color_hash[dataset.indexOf(d)][1] });

legend.append("text")
  .attr("x", w - 65)
  .attr("y", 25)
  .text(function(d) { return color_hash[dataset.indexOf(d)][0] + ": " + d; });

然后我试图为这个.legend类设置样式:

.legend {
            padding: 5px;
            font: 10px sans-serif;
            background: yellow;
            box-shadow: 2px 2px 1px #888;
        }

但我运气不好.

是否有人熟悉将图例添加到能够提供最佳方法的图表中？我在网上找不到很多资源.

这是我的整个图表:http: //jsbin.com/ewiwag/2/edit

我从多线示例开始http://bl.ocks.org/mbostock/3884955 我将它扩展为显示沿线的点,但是我无法给圆圈提供相同颜色的线条. ..我在d3.js中真的很新,我真的需要一个建议.这里是示例页面:http://www.danielepennati.com/d3/linea.html 我更改了一些变量名称以使脚本更通用,因此与原始示例代码存在一些差异.主要的是包含映射数据的变量的名称:它是"列"而不是"城市"

d3.tsv(surce_data, function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "id"; }));

var column = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {id: d.id, value: +replace(d[name])};
    })
  };
});

第二个主要区别是x axsis:在我的代码中它是序数而不是线性的.所以要绘制代码的行:

var tracciato = svg.selectAll(".line-group")
.data(column)
.enter().append("g")
.attr("class", "line-group");

tracciato.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });

沿着这条线写点我写了这段代码:

var point = tracciato.append("g")
    .attr("class", "line-point");

    point.selectAll('circle')
    .data(function(d,i){ return d.values})
    .enter().append('circle')
    .attr("cx", function(d, i) { …