Question

我有一个指示国家/地区的单选按钮列表。我希望当用户点击单选按钮时，会加载右边的折线图。为此，我有4个csv文件，其中包含每个国家/地区的数据。

csv文件是这样的：

year,death,value
2012,Tuberculosis,NA
2011,Tuberculosis,NA
2010,Tuberculosis,301
2009,Tuberculosis,344
2008,Tuberculosis,333
2007,Tuberculosis,329
2006,Tuberculosis,350
2005,Tuberculosis,NA
2004,Tuberculosis,NA
2003,Tuberculosis,396
2002,Tuberculosis,413
2001,Tuberculosis,415
2000,Tuberculosis,460
1999,Tuberculosis,517
1998,Tuberculosis,558
1997,Tuberculosis,597
1996,Tuberculosis,609
1995,Tuberculosis,647
2012,Tetanus,NA
2011,Tetanus,NA
2010,Tetanus,17
2009,Tetanus,27
2008,Tetanus,18
...

HERE是我的代码。我不知道为什么Plunker会创建错误＆＃34; 错误请求＆＃34;。

无论如何，这是我的结果：如果用户点击意大利，那么浏览器加载Italy.csv文件并创建图表，如果用户点击匈牙利，则浏览器加载Hungary.csv文件并创建图表等等上。

问题是在我的csv文件中，有一些＆＃34;漏洞＆＃34;关于数据。例如，我没有关于2003年至2006年期间意大利死亡人数的任何数据，因此我想显示虚线而不是实线。在我的图表中，我无法做到这一点。特别是，我编写代码来做到这一点，但它不起作用。请注意，缺少的数据将根据国家/地区而变化。对于某些国家/地区，我拥有所有数据而非其他国家/地区。

此外，如果用户点击相应系列的圆圈（图例）消失，则圆圈应变为白色，轴将更改为适合当前数据。这不起作用，我不明白为什么。

如您所见，控制台不会显示任何错误。

在这个类似的例子中，它有效：PLUNKER

我严厉地解释了自己。使用＆＃34;缺少数据＆＃34;我的意思是NA值。

NEW PLUNKER

我理解比利时的图表是对的。我试图理解为什么丹麦图表是这样的但很抱歉，当你说＆＃34; Code为每个可用数据生成多个路径并且只为所有NA数据生成一条路径时，我不明白。相反，它必须为数据上的每个间隙生成一个段。＆＃34;。

代码以这种方式组织：

// some code...

/************************************************************************** 
 *** GET SELECTED COUNTRY AND DRAW FIRST CHART ****************************
 **************************************************************************/
var l_selectedCountry = document.querySelector('input[name="l_country"]:checked').value;
l_createLineChart(l_selectedCountry);
var l_updateradio = function() {
    l_selectedCountry = $('input[name=l_country]:checked', '#l_countries').val(); 
    l_createLineChart(l_selectedCountry);
}
$("#l_countries").on("change", l_updateradio);

/************************************************************************** 
 *** DRAW THE RIGHT CHART BASED ON SELECTED COUNTRY  **********************
 **************************************************************************/
function l_createLineChart(l_selectedCountry) {
  // remove last chart
  d3.select("#l_chartcontainer")
    .html("");

  // adds the svg canvas
  var svg = d3.select("#l_chartcontainer") 
    .append("svg")
    .attr("width", l_width + margin.left + margin.right)
    .attr("height", l_height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var l_file = "./data/line_data/" + l_selectedCountry + ".csv";

  /************************************************************************** 
  *** GET RIGHT DATA ********************************************************
  **************************************************************************/
  d3.csv(l_file, function(l_error, l_data) { 

    l_data.forEach(function(d) {
        d.year = parseDate(d.year);
        d.value = +d.value;
    });

    // code about axis...

    /************************************************************************** 
    *** GET ALL LINE DATA (solid & dashed) ************************************
    **************************************************************************/
    var l_dataNest = d3.nest()
        .key(function(d) { 
            return d.death; 
        })
        .entries(l_data);
    console.log("l_dataNest");
    console.log(l_dataNest);    

    // code about labels...

    /************************************************************************** 
    *** GET DASHED LINE DATA **************************************************
    **************************************************************************/
    var l_dashedData = l_getDashed(l_dataNest); // dashed line (extreme point) for each disease
    console.log("l_dashedData");
    console.log(l_dashedData);

    // other code...

    /************************************************************************** 
    *** DRAW SOLID LINE *******************************************************
    **************************************************************************/
    svg.append('g')
      .attr('class', 'l_line-container')
      .selectAll('.normal-line-paths')
      .data(l_dataNest) // set our data
      .enter() // enter the data and start appending elements
      .append('path')
      .call(l_path); // calling our path function for later use when appending lines

    /************************************************************************** 
    *** DRAW DASHED LINE ******************************************************
    **************************************************************************/
    svg.append('g')
      .attr('class', 'dashed-line-container')
      .selectAll('.dashed-line-paths')
      .data(l_dashedData)
      .enter()
      .append('path')
      .call(l_dashedPath);

    // other code...
  });
}

// code about event...

function l_path(myPath) {
  myPath.style("fill", "none")
    .style("stroke", function(d) {
        return l_color[d.key];
    })
    .attr('class', function(d) {
        return 'normal-line-paths path-' + d.key.replace(/\s+/g, '');
    })
    .attr("d", function(d) {
        return valueline(d.values);
    })
    .style("opacity", 0.5)
    .on("mouseover", l_onMouseOverLine)
    .on("mouseout", l_onMouseOutLine);
}

function l_dashedPath(myPath) {
  myPath.style("fill", "none")
    .style("stroke", function(d) {
        return l_color[d.key];
    })
    .style("stroke-width", 5)
    .attr("stroke-dasharray", '4')
    .attr('class', function(d) {
        return 'dashed-line-paths path-' + d.key.replace(/\s+/g, '');
    })
    .attr("d", function(d) {
        return valueline(d.values);
    })
    .style("opacity", 0.5)
    .on("mouseover", l_onMouseOverLine)
    .on("mouseout", l_onMouseOutLine);
}

/**
 * Function to return the data points that will create the dashed lines.
 */
function l_getDashed(data) {
  return data.map(function(collection, index) {
    var l_startNaN = false;
    var l_dashed = {
     key: collection.key, // disease
     values: [] //array of death, death and year
    };
    collection.values.forEach(function(dataPoint, index) {
      var l_value = dataPoint.value;
      var values = collection.values;           
      if($.isNumeric(l_value) && l_startNaN) {
        l_startNaN = false;
       l_dashed.values.push(values[index]);
      } 
      else {
       if(($.isNumeric(l_value) && l_startNaN) || (!$.isNumeric(l_value) && !l_startNaN)) {
          l_startNaN = true;
          l_dashed.values.push(values[index-1]);
        }
      }
    })
    if((l_dashed.values.length % 2)) {
      l_dashed.values.pop();
    }
    return l_dashed;
  });
}

如果我评论这段代码：

// apend a group element which will contain our dashed lines
/*svg.append('g')
    .attr('class', 'dashed-line-container')
    .selectAll('.dashed-line-paths')
    .data(l_dashedData)
    .enter()
    .append('path')
    .call(l_dashedPath);*/

我明白了：

如果我发表评论：

// apend a group element which will contain our lines
/*svg.append('g')
    .attr('class', 'l_line-container')
    .selectAll('.normal-line-paths')
    .data(l_dataNest) // set our data
    .enter() // enter the data and start appending elements
    .append('path')
    .call(l_path); */

我明白了：

因此l_dashedPath(myPath)方法一定存在问题。但是如果我打印d，我会得到两个部分的四个末端（TBerculosis）：23,32,15,16是正确的。

.attr("d", function(d) {
    console.log(d);
    return valueline(d.values);
})

l_getDashed(data)方法对我来说也是正确的。

Answer 1

在Plunker内，你不能在文件名上有空格。将其'United Kingdom.csv'重命名为带下划线（_）左右的内容。 "United_Kingdom.csv"

你的函数l_getdashed，不要为每个虚线段取下一个点。最后，你得到一个点，而不是一个片段。

我重新重构你的功能：

function l_getDashed(data) {
    return data.map(function(collection, index) {
        var l_startNaN = false;
        var l_dashed = {
            key: collection.key,
            values: []
        };
        collection.values.forEach(function(dataPoint, index) {
            var l_value = dataPoint.value;
            var values = collection.values;         

            if ($.isNumeric(l_value) && l_startNaN) {
                l_startNaN = false;
                l_dashed.values.push(values[index]);
            } else if ( !$.isNumeric(l_value) !== l_startNaN) {
                l_startNaN = true
                l_dashed.values.push(values[index-1]);
            }
        })
        if (l_dashed.values.length % 2) { l_dashed.values.pop() }
        return l_dashed;
    });
}

jhipster docs

<强>丹麦

您的代码存在概念错误。这就是为什么你看到丹麦＆＃39;那样的。

图形：

Here the update working Plunker

代码为每个可用数据生成多个路径，并为所有NA数据生成一个路径。相反，它必须为数据上的每个间隙生成一个段.-

<强>比利时

Belguim是一个不同的历史。图表没问题，你的数据有孤立点（红点），不能解散。

您无法在1997 - 2009年绘制虚线（黑色箭头），因为您将丢弃数据。

虚线不起作用

1 个答案: