Question

我有一组我在多行中绘制的数据。当我将鼠标悬停在单个圆圈上时，我希望它弹出数据（如x，y值，可能更多），而且我很困惑如何更改线条颜色。这是我试过的代码

    <!DOCTYPE html>
    <meta charset="utf-8">
    <style> /* set the CSS */

     .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
       }
    </style>
    <body>

   <!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%Y");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
  .x(function(d) { return x(d.Date); })
  .y(function(d) { return y(d.Imports); });
// define the line
var valueline2 = d3.line()
  .x(function(d) { return x(d.Date); })
  .y(function(d) { return y(d.Exports); });
var valueline3 = d3.line()
.x(function(d) { return x(d.Date); })
.y(function(d) { return y(d.added); });


var svg = d3.select("body").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 + ")");

function draw(data, country) {

  var data = data[country];

  // format the data
  data.forEach(function(d) {
      d.Date = parseTime(d.Date);
      d.Imports = +d.Imports;
      d.Exports = +d.Exports;
      d.added = +d.added;
  });

  // sort years ascending
  data.sort(function(a, b){
    return a["Date"]-b["Date"];
    })

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.Date; }));
  y.domain([0, d3.max(data, function(d) {
      return Math.max(d.Imports, d.Exports,d.added); })]);

  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);
  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline2);
svg.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", valueline3);
  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  }
// Get the data
d3.json("data1.json", function(error, data) {
  if (error) throw error;

  // trigger render
  draw(data, "purchase");
});

</script>
</body>

这是我的data1.json

{

   "purchase": [

     {
         "Date": 1999,
         "Imports": "15",
         "Exports": "20",
         "added": "27"
      },
      {
         "Date": 2008,
         "Imports": "42",
         "Exports": "115",
         "added": "32"
      },
      {
         "Date": 2007,
         "Imports": "29",
         "Exports": "79",
         "added": "47"
      },
      {
         "Date": 2009,
         "Imports": "346",
         "Exports": "324",
         "added": "305"
      },
      {
         "Date": 2006,
         "Imports": "44",
         "Exports": "69",
         "added": "77"
      },
      {
         "Date": 2010,
         "Imports": "424",
         "Exports": "503",
         "added": "441"
      },
      {
         "Date": 2005,
         "Imports": "28",
         "Exports": "48",
         "added": "50"
      },
      {
         "Date": 2011,
         "Imports": "413",
         "Exports": "603",
         "added": "620"
      },
      {
         "Date": 2004,
         "Imports": "34",
         "Exports": "41",
         "added": "20"
      },
      {
         "Date": 2012,
         "Imports": "313",
         "Exports": "517",
         "added": "420"
      },
      {
         "Date": 2003,
         "Imports": "21",
         "Exports": "36",
         "added": "20"
      },
      {
         "Date": 2013,
         "Imports": "513",
         "Exports": "615",
         "added": "415"
      },
      {
         "Date": 2002,
         "Imports": "18",
         "Exports": "23",
         "added": "20"
      },
      {
         "Date": 2014,
         "Imports": "471",
         "Exports": "766",
         "added": "620"
      },
      {
         "Date": 2001,
         "Imports": "17",
         "Exports": "36",
         "added": "29"
      },
      {
         "Date": 2015,
         "Imports": "119",
         "Exports": "181",
         "added": "177"
      },
      {
         "Date": 2000,
         "Imports": "25",
         "Exports": "25",
         "added": "17"
      }
   ]
}

任何人都可以建议我如何在线添加工具提示数据点并更改颜色

Answer 1

我很高兴你仔细看看克里斯吮吸的例子，如果你想了解更多的事情，那么这个例子会使用d3.mouse和d3.bisector深度。

我使用您的代码和提到的方法制作了 Plunker 。看一下import pandas as pd a = [['Cliente', 'Fecha', 'Variables', 'Dia Previo', 'Mayor/Menor', 'Dia a Analizar', 'Analisis'], ['AAA', '27/12/2017', 'ECPM_medio', '0.41', 'Dentro del Margen', '0.35', 'Incremento'], ['BBB', '27/12/2017', 'ECPM_medio', '1.06', 'Dentro del Margen', '1.06', 'Alerta'], ['CCC', '27/12/2017', 'ECPM_medio', '1.06', 'Dentro del Margen', '1.06', 'Estable']] headers = a.pop(0) df = pd.DataFrame(a, columns = headers) df['Analisis'] for elemento in df['Analisis']: if elemento == 'Estable': df['Status'] = 'Stable: The client''s performance was Stable' else: df['Status'] = 'NoAnalyzed' df1= df.groupby(['Cliente','Fecha', 'Status']).size() df1 output: >>> Cliente Fecha Status AAA 27/12/2017 Stable: The clients performance was Stable 1 BBB 27/12/2017 Stable: The clients performance was Stable 1 CCC 27/12/2017 Stable: The clients performance was Stable 1 I need: >>> Cliente Fecha Status AAA 27/12/2017 NoAnalyzed 1 BBB 27/12/2017 NoAnalyzed 1 CCC 27/12/2017 Stable: The clients performance was Stable 1函数和mousemove()变量，我的示例并不完美，您可以使代码更有效但它应该让您大致了解它是如何实现的。完成。

我为线条颜色所做的就是添加focus。对于每一行。

如何在d3js中添加工具提示并更改线条笔触的颜色？

1 个答案: