Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/446.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 如何从数据集中选择一组值来使用D3.js而不是整个数据集绘制折线图_Javascript_D3.js_Linechart - Fatal编程技术网

Javascript 如何从数据集中选择一组值来使用D3.js而不是整个数据集绘制折线图

Javascript 如何从数据集中选择一组值来使用D3.js而不是整个数据集绘制折线图,javascript,d3.js,linechart,Javascript,D3.js,Linechart,我有一个像这样的数据集 entity,code,year,value Afghanistan,AFG,1990,10.31850413 Afghanistan,AFG,1991,10.32701045 Albania,ALB,1990,3.985169898 Albania,ALB,1991,4.199006705 我想用D3.js绘制一个折线图,但只针对代码为“AFG”的国家。x轴是从1990年到2017年,y轴是值。目前,我的代码包含所有国家,因此创建了一个包含100多条重叠线的折线图。如

我有一个像这样的数据集

entity,code,year,value
Afghanistan,AFG,1990,10.31850413
Afghanistan,AFG,1991,10.32701045
Albania,ALB,1990,3.985169898
Albania,ALB,1991,4.199006705
我想用D3.js绘制一个折线图,但只针对代码为“AFG”的国家。x轴是从1990年到2017年,y轴是值。目前,我的代码包含所有国家,因此创建了一个包含100多条重叠线的折线图。如何更改此代码以使其采用指定值:

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 560 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg2 = d3.select("#linechart")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("./files/suicide-death-rates.csv",



  // Now I can use this dataset:
  function(data) {

    // Add X axis --> it is a date format
    var x = d3.scaleLinear()
      .domain(d3.extent(data, function(d) { return d.year; }))
      .range([ 0, width ]);
    svg2.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.value; })])
      .range([ height, 0 ]);
    svg2.append("g")
      .call(d3.axisLeft(y));

    // Add the line
    svg2.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.year) })
        .y(function(d) { return y(d.value) })
        )

})


提前谢谢

您只需过滤
.datum(数据)
如下:

// Add the line
svg2.append("path")
  .datum(data.filter(f => f.code ==="AFG"))
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
    .x(function(d) { return x(d.year) })
    .y(function(d) { return y(d.value) })
    )

我想知道您是否可以使用.filter()仅为AFG修改数据集。