Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/440.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在NVD3散点图上绘制标签_Javascript_D3.js_Nvd3.js - Fatal编程技术网

Javascript 在NVD3散点图上绘制标签

Javascript 在NVD3散点图上绘制标签,javascript,d3.js,nvd3.js,Javascript,D3.js,Nvd3.js,如果我有来自于的示例的以下代码,我可以向打印点添加标签吗?不是工具提示,但是否将“我的数据”中的某个值渲染为始终附着到点的标签?显然,在这个特定的例子中这样做会过于拥挤,但在一个人口较少的图表中,如果每个点都有一个名称,则最好进行标记。谢谢大家! nv.addGraph(function() { var chart = nv.models.scatterChart() .showDistX(true) //showDist, when true, w

如果我有来自于的示例的以下代码,我可以向打印点添加标签吗?不是工具提示,但是否将“我的数据”中的某个值渲染为始终附着到点的标签?显然,在这个特定的例子中这样做会过于拥挤,但在一个人口较少的图表中,如果每个点都有一个名称,则最好进行标记。谢谢大家!

  nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)    //showDist, when true, will display those little distribution lines on the axis.
                .showDistY(true)
                .transitionDuration(350)
                .color(d3.scale.category10().range());

  //Configure how the tooltip looks.
  chart.tooltipContent(function(key) {
      return '<h3>' + key + '</h3>';
  });

  //Axis settings
  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));

  //We want to show shapes other than circles.
  chart.scatter.onlyCircles(false);

  var myData = randomData(4,40);
  d3.select('#chart svg')
      .datum(myData)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

/**************************************
 * Simple test data generator
 */
function randomData(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random()
      , y: random()
      , size: Math.random()   //Configure the size of each scatter point
      , shape: (Math.random() > 0.95) ? shapes[j % 6] : "circle"  //Configure the shape of each scatter point.
      });
    }
  }

  return data;
}
nv.addGraph(函数(){
var chart=nv.models.scatterChart()
.showDistX(true)//showDist为true时,将在轴上显示这些小分布线。
.炫耀(真实)
.过渡期(350)
.颜色(d3.比例.类别10().范围());
//配置工具提示的外观。
图表.工具提示内容(函数(键){
返回“”+键+“”;
});
//轴设置
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
//我们希望显示除圆以外的形状。
图表。散点。仅圆形(假);
var myData=随机数据(4,40);
d3.选择(“#图表svg”)
.数据(myData)
.电话(图表);
nv.utils.windowResize(图表更新);
收益表;
});
/**************************************
*简单测试数据发生器
*/
函数随机数据(组,点){/#组,每组#点
var数据=[],
形状=[“圆形”、“十字形”、“三角形向上”、“三角形向下”、“菱形”、“正方形”],
random=d3.random.normal();
对于(i=0;i<组;i++){
数据推送({
键:'组'+i,
值:[]
});
对于(j=0;j0.95)?形状[j%6]:“圆”//配置每个分散点的形状。
});
}
}
返回数据;
}

您只需添加标签即可。这很俗气,但给出了一个想法:

var svg = d3.select('svg');
svg.selectAll('path')
    .each(function(scatterpoint) {
        svg.append('text')
             .x(scatterpoint.x)
             .y(scatterpoint.y)
             .text(scatterpoint.maybe_you_have_text_here);
    })