D3.js.使用d3.nest（）

时间：2017-04-25 16:30:18

标签： javascript d3.js

我只是在学习d3.js，我的javascript级别是基本的。 感谢您的帮助，非常感谢。

总点击次数pr。广告活动。

我有一个带colums的csv文件：＆＃34; Campaign＆＃34;和＆＃34;点击＆＃34;。 ＆＃34;已点击＆＃34;列由值组成：单击/否单击。 我想显示每个广告系列的总点击次数。我不在乎No Click。 我已经创建了一个计算单击的函数并将计数存储在每个数据成员中。我使用d.count来设置y域。 y轴和x轴显示正确。 但是条形图中的值没有显示出来。 我假设这两行代码不正确：

.attr（＆＃34; y＆＃34;，f 

unction(d) { return y(d.key); })
.attr("height"
, function(d) { return height - y(d.key); });

在控制台中我收到此错误：

d3.v4.min

  

.js：2错误：属性高度：预期长度，＆＃34; NaN＆＃34;。   d3.v4.min.j

     

s：2错误：属性高度：预期长度，＆＃34; NaN＆＃34;

由于我为列Clicked提供了两个值：＆＃34; Clicked＆＃34;并且＆＃34;没有点击＆＃34;，我认为我必须排除价值＆＃34; No Click＆＃34;在我的d3.nest（）函数中？

如何显示每个广告系列点击的值？我错过了什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>barChart</title>
</head>
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>

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

<script>

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

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

// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// get the data 
    d3.csv("EmailMarketingCampaign_Data.csv")
    .row(function(d){ return {Campaign: (d.Campaign), Clicked: (d.Clicked)}; })
    .get(function(error,data){
    console.log(data[0]);

 // format all data from strings
  data.forEach(function(d) {
    d.data = +d.data;   
  });

// Array [ Object, Object ] Key: Clicked, Key: No Clicked
     var nested_data = d3.nest()
     .key(function(d) { return d.Clicked; })
    .rollup(function(values) {
     return values.length; 
     })
     .entries(data);        
     console.log(nested_data);

// count all clicked to set range for y axis

      var countObj = {};

        // count Clicked 
        data.forEach(function(d) {
        var Clicked = d.Clicked;
        if(countObj[Clicked] === undefined) {
        countObj[Clicked] = 0;
        } else {
        countObj[Clicked] = countObj[Clicked] + 1;
        }
        });
        // now store the count in each data member
        data.forEach(function(d) {
        var Clicked = d.Clicked;
        d.count = countObj[Clicked];
        });
        console.log(countObj);


  // Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.Campaign; }));
  y.domain([0, d3.max(data, function(d) { return d.count; })]);

  // append the rectangles for the bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")

      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Campaign); })
      .attr("width", x.bandwidth())

      .attr("y", function(d) { return y(d.key); })
      .attr("height", function(d) { return height - y(d.key); });



  // 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));

});

</script>
</body>

</html>

EmailMarketingCampaign_Data.csv

的Ca

  

mpaign，Click_Date，开始，结束，点击，clickedFlag，客户   ID，周日，年龄，国家，人口统计，性别JAN   SALES，30/12 / 2012,30 / 12 / 2012,29 / 01/2013，点击，1,10，孙，30岁，英国，成人，男性   JAN   销售31/12 / 2012,30 / 12 / 2012,29 / 01/2013，点击，1,11，周一，26岁，英国，成人，女性   JAN   SALES，01/01 / 2013,30 / 12 / 2012,29 / 01/2013年，点击，1,12，星期二，59，英国，成人，男性   JAN   销售，02年/ 01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,13，三，3，英国，儿童，男性   JAN   销售03/01 / 2013,30 / 12 / 2012,29 / 01/2013年，点击，1,14，星期四，59，德国，成人，女性   JAN SALES，04/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,15，周五，39，英国，成人，男性JAN   SALES，05/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,16，星期六，19，英国，成人，男性   JAN SALES，07/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,18，星期一，25，英国，成人，男性JAN   销售08/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,19，星期二，6，英国，儿童，男性   JAN   销售09/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,20，星期三，55，德国，成人，女性   JAN   SALES，第10/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,21，星期四，19，UK，成人，男性   JAN SALES，11/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,22，周五，32，英国，成人，男性JAN   SALES，12/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,23，星期六，18，英国，成人，女性   JAN   SALES，14/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,25，星期一，7，UK，儿童，男性   JAN   销售30/12 / 2012,30 / 12 / 2012,29 / 01/2013年，点击，1,32，太阳，59，法国，成人，女性   JAN   SALES 31/12 / 2012,30 / 12 / 2012,29 / 01/2013，点击，1,33，星期一，28，法国，成人，男性   JAN   SALES，01/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,34，星期二，31，英国，成人，男性   JAN SALES，02/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,35，周三，3，法国，儿童，女性JAN   销售03/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,36，星期四，38，法国，成人，男性   JAN   SALES，04/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1.37，周五，50，法国，成人，男性   JAN   SALES，05/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1.38，星期六，57，法国，成人，女性   JAN   SALES，06/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,39，孙，38岁，法国，成人，男性   JAN   SALES，07/01 / 2013,30 / 12 / 2012,29 / 01/2013年，点击，1,40，星期一，31日，英国，成人，男性   JAN SALES，08/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,41，星期二，33，法国，成人，女性JAN   SALES 09/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,42，星期三，34，法国，成人，男性   JAN   SALES，第10/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,43，星期四，59，法国，成人，男性   JAN SALES，11/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,44，周五，13，法国，青少年，女性JAN   SALES，12/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,45，六，2，法国，儿童，男性   JAN   SALES，13/01 / 2013,30 / 12 / 2012,29 / 01/2013年，点击，1,46，孙，39岁，英国，成人，男性   JAN   销售30/12 / 2012,30 / 12 / 2012,29 / 01/2013，点击，1,54，太阳，18，法国，成人，男性   JAN   SALES，01/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,55，星期二，13，法国，青少年，男   JAN   销售11/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,56，星期五，50，法国，成人，女性   JAN SALES，11/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,57，周五，19，法国，成人，男性JAN   SALES 03/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,58，星期四，22，美国，成人，男性   JAN   SALES，04/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1.59，周五，11，美国，儿童，女性   JAN SALES，05/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,60，周六，56，美国，成人，男性JAN   SALES，第11/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,61，周五，7，USA，儿童，男性   JAN   SALES，07/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,62，周一，9，美国，儿童，女性   JAN   SALES的08/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,63，周二，43，法国，成人，男性   JAN   销售09/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,64，周三，2，法国，儿童，男性   JAN   SALES，第11/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,66，周五，32，美国，成人，男性   JAN   SALES，12/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,67，星期六，4，USA，儿童，男性   JAN   SALES，13/01 / 2013,30 / 12 / 2012,29 / 01/2013，点击，1,68，孙，47岁，美国，成人，女性   JAN SALES，14/01 / 2013,30 / 12 / 2012,29 / 01/2013，No   点击，0,69，星期一，49，美国，成人，男性未知，01/02/2013 ,,,没有   点击，0,2，周五，33，法国，成人，女性   未知，01/03/2013 ,,,点击，1,3，周五，17，德国，青少年，男   未知，06/03/2013 ,,,点击，1,17，三，1，英国，儿童，女性   未知，13/02/2013 ,,,点击，1.24，三，五，英国，儿童，男性   未知，14/03/2013 ,,,点击，1,47，星期四，22，法国，成人，女性   未知，10/04/2013 ,,,点击，1,65，星期三，11，美国，儿童，女性   圣诞，27/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,1，周五，24，英国，成人，男性   圣诞24/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,4，周一，18，英国，成人，男性   圣诞25/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,5，星期二，19，英国，成人，女性   XMAS 26/12 / 2012,23 / 12 / 2012,29 / 12/2012年，无   点击，0,6，周三，58岁，英国，成人，男性   XMAS 27/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,7-，星期四，16，德国，青少年，男   XMAS 28/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,8-，周五，26，UK，成人，女性   圣诞，28/12 / 2012,23 / 12 / 2012,29 / 12/2012号   点击，0,9，星期六，37，英国，成人，男性   圣诞24/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,26，星期一，19日，德国，成人，女性   XMAS 25/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,27，周二，43，UK，成人，男性   XMAS 26/12 / 2012,23 / 12 / 2012,29 / 12/2012年，无   点击，0,28，星期三，20，英国，成人，男性   圣诞，第27/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,29，周四，19，法国，成人，女性   圣诞，27/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,30，星期五，58，法国，成人，男性   圣诞，28/12 / 2012,23 / 12 / 2012,29 / 12/2012号   点击，0,31，六，七，法国，儿童，男性   XMAS 24/12 / 2012,23 / 12 / 2012,29 / 12/2012年，无   点击，0.48，周一，三，法国，儿童，男性   圣诞节，25/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,49，星期二，25，法国，成人，男性   圣诞，27/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,50，星期三，18，法国，成人，女性   圣诞，第27/12 / 2012,23 / 12 / 2012,29 / 12/2012号   点击，0,51，星期四，5，法国，儿童，男性   XMAS 28/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,52，周五，1，UK，儿童，男性   XMAS 29/12 / 2012,23 / 12 / 2012,29 / 12/2012年，点击，1,53，星期六，0，法国，儿童，女性

screenshot

2 个答案:

答案 0 :(得分：0)

您需要在nested_data中使用两个级别分组，然后只使用＆＃34; Clicked＆＃34;用于比例计算和数据绑定的组。

＆＃13;
＆＃13; 
var dataString = "Campaign,Click_Date,Start,End,Clicked,clickedFlag,Customer ID,weekDay,Age,Country,Demographic,Gender \nEXTORTION,30/12/2012,30/12/2012,29/01/2013,Clicked,1,10,Sun,30,UK,Adult,Male \nSALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,11,Mon,26,UK,Adult,Female \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,12,Tue,59,UK,Adult,Male \nSALES,02/01/2013,30/12/2012,29/01/2013,Clicked,1,13,Wed,3,UK,Child,Male \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,14,Thu,59,Germany,Adult,Female \nSALES,04/01/2013,30/12/2012,29/01/2013,No Click,0,15,Fri,39,UK,Adult,Male \nSALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,16,Sat,19,UK,Adult,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,No Click,0,18,Mon,25,UK,Adult,Male \nSALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,19,Tue,6,UK,Child,Male \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,20,Wed,55,Germany,Adult,Female \nSALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,21,Thu,19,UK,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,22,Fri,32,UK,Adult,Male \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,23,Sat,18,UK,Adult,Female \nSALES,14/01/2013,30/12/2012,29/01/2013,Clicked,1,25,Mon,7,UK,Child,Male \nSALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,32,Sun,59,France,Adult,Female \nSALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,33,Mon,28,France,Adult,Male \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,34,Tue,31,UK,Adult,Male \nSALES,02/01/2013,30/12/2012,29/01/2013,No Click,0,35,Wed,3,France,Child,Female \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,36,Thu,38,France,Adult,Male \nSALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,37,Fri,50,France,Adult,Male \nSALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,38,Sat,57,France,Adult,Female \nSALES,06/01/2013,30/12/2012,29/01/2013,Clicked,1,39,Sun,38,France,Adult,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,40,Mon,31,UK,Adult,Male \nSALES,08/01/2013,30/12/2012,29/01/2013,No Click,0,41,Tue,33,France,Adult,Female \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,42,Wed,34,France,Adult,Male \nSALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,43,Thu,59,France,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,44,Fri,13,France,Teen,Female \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,45,Sat,2,France,Child,Male \nSALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,46,Sun,39,UK,Adult,Male \nSALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,54,Sun,18,France,Adult,Male \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,55,Tue,13,France,Teen,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,56,Fri,50,France,Adult,Female \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,57,Fri,19,France,Adult,Male \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,58,Thu,22,USA,Adult,Male \nSALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,59,Fri,11,USA,Child,Female \nSALES,05/01/2013,30/12/2012,29/01/2013,No Click,0,60,Sat,56,USA,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,61,Fri,7,USA,Child,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,62,Mon,9,USA,Child,Female \nSALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,63,Tue,43,France,Adult,Male \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,64,Wed,2,France,Child,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,66,Fri,32,USA,Adult,Male \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,67,Sat,4,USA,Child,Male \nSALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,68,Sun,47,USA,Adult,Female \nSALES,14/01/2013,30/12/2012,29/01/2013,No Click,0,69,Mon,49,USA,Adult,Male"
// set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 300 - margin.left - margin.right,
  height = 200 - margin.top - margin.bottom;

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

// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// get the data 
var data = d3.csvParse(dataString);

//console.log(data[0]);

// format all data from strings
data.forEach(function(d) {
  d.data = +d.data;
});

// Array [ Object, Object ] Key: Clicked, Key: No Clicked
var nested_data = d3.nest()
  .key(function(d) {
    return d.Clicked;
  })
  .key(function(d) {
    return d.Campaign
  })
  .rollup(function(values) {
    return values.length;
  })
  .entries(data);

var clicked_data = nested_data.find(d => d.key == "Clicked").values

// Scale the range of the data in the domains
x.domain(clicked_data.map(function(d) {
  return d.key;
}));
y.domain([0, d3.max(clicked_data, function(d) {
  return d.value;
})]);

// append the rectangles for the bar chart
svg.selectAll(".bar")
  .data(clicked_data)
  .enter().append("rect")

  .attr("class", "bar")
  .attr("x", function(d) {
    return x(d.key);
  })
  .attr("width", x.bandwidth())

  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.value);
  });



// 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));
＆＃13; 
<script src="https://d3js.org/d3.v4.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我可以看到我有很多缺失的链接。 我现在根据你的建议修改了我的代码。 有用。非常感谢，我自己也无法解决这个问题。 我试图使用相同的nested_data来显示行中的clicked_data（d3.line生成器），其中x轴为“Click_Date”和y轴“Clicked”值， 按3个广告系列分类：Jan，Xmas和Undefined。 所以我使用的是d3.line（）和path。 我在console.log中收到此错误：错误：属性d：预期的数字，“MNaN，0Z”。 当我“console.log”时，我可以看到clicked_data正在读取如下：[Object] 0：Objectlength：1__proto __：Array（0）concat：function concat（）构造函数：function Array（） 这是代码。我想我必须在这里工作：

  

svg.append（ “路径”）             。数据（[clicked_data]）             .attr（“class”，“line”）             .attr（“d”，valueline）; 

// 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("%d-%b-%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.key); })
    .y(function(d) { return y(d.value); });
console.log(valueline);

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// Get the data
d3.csv("EmailMarketingCampaign_Data.csv", function(error, data) {
  if (error) throw error;

/*  function convert(d) {
  return {
    date: new Date(d.Click_Date),
    value: +d.value         // convert string to number
  };
} */

  // format the data
  data.forEach(function(d) {
      d.Click_Date = parseTime(d.Click_Date);
      d.value = +d.value;
  });

    /* Two level grouping in nested_data: Clicked and Campaign */

var nested_data = d3.nest()
  .key(function(d) {
    return d.Clicked;
  })
  .key(function(d) {
    return d.Click_Date
  })
  .rollup(function(values) {
    return values.length;
  })
  .entries(data);

/* Get values from key "Clicked" and put in clicked_date */

var clicked_data = nested_data.find(d => d.key == "Clicked").values

console.log(clicked_data);

  // Scale the range of the data
  x.domain(d3.extent(clicked_data, function(d) { return d.key; }));
  y.domain([0, d3.max(clicked_data, function(d) { return d.value; })]);

  // Add the valueline path.
  svg.append("path")
      .data([clicked_data])
      .attr("class", "line")
      .attr("d", valueline);

  // 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));

});


var dataString = "Campaign,Click_Date,Start,End,Clicked,clickedFlag,Customer ID,weekDay,Age,Country,Demographic,Gender \nEXTORTION,30/12/2012,30/12/2012,29/01/2013,Clicked,1,10,Sun,30,UK,Adult,Male \nSALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,11,Mon,26,UK,Adult,Female \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,12,Tue,59,UK,Adult,Male \nSALES,02/01/2013,30/12/2012,29/01/2013,Clicked,1,13,Wed,3,UK,Child,Male \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,14,Thu,59,Germany,Adult,Female \nSALES,04/01/2013,30/12/2012,29/01/2013,No Click,0,15,Fri,39,UK,Adult,Male \nSALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,16,Sat,19,UK,Adult,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,No Click,0,18,Mon,25,UK,Adult,Male \nSALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,19,Tue,6,UK,Child,Male \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,20,Wed,55,Germany,Adult,Female \nSALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,21,Thu,19,UK,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,22,Fri,32,UK,Adult,Male \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,23,Sat,18,UK,Adult,Female \nSALES,14/01/2013,30/12/2012,29/01/2013,Clicked,1,25,Mon,7,UK,Child,Male \nSALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,32,Sun,59,France,Adult,Female \nSALES,31/12/2012,30/12/2012,29/01/2013,Clicked,1,33,Mon,28,France,Adult,Male \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,34,Tue,31,UK,Adult,Male \nSALES,02/01/2013,30/12/2012,29/01/2013,No Click,0,35,Wed,3,France,Child,Female \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,36,Thu,38,France,Adult,Male \nSALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,37,Fri,50,France,Adult,Male \nSALES,05/01/2013,30/12/2012,29/01/2013,Clicked,1,38,Sat,57,France,Adult,Female \nSALES,06/01/2013,30/12/2012,29/01/2013,Clicked,1,39,Sun,38,France,Adult,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,40,Mon,31,UK,Adult,Male \nSALES,08/01/2013,30/12/2012,29/01/2013,No Click,0,41,Tue,33,France,Adult,Female \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,42,Wed,34,France,Adult,Male \nSALES,10/01/2013,30/12/2012,29/01/2013,Clicked,1,43,Thu,59,France,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,44,Fri,13,France,Teen,Female \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,45,Sat,2,France,Child,Male \nSALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,46,Sun,39,UK,Adult,Male \nSALES,30/12/2012,30/12/2012,29/01/2013,Clicked,1,54,Sun,18,France,Adult,Male \nSALES,01/01/2013,30/12/2012,29/01/2013,Clicked,1,55,Tue,13,France,Teen,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,56,Fri,50,France,Adult,Female \nSALES,11/01/2013,30/12/2012,29/01/2013,No Click,0,57,Fri,19,France,Adult,Male \nSALES,03/01/2013,30/12/2012,29/01/2013,Clicked,1,58,Thu,22,USA,Adult,Male \nSALES,04/01/2013,30/12/2012,29/01/2013,Clicked,1,59,Fri,11,USA,Child,Female \nSALES,05/01/2013,30/12/2012,29/01/2013,No Click,0,60,Sat,56,USA,Adult,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,61,Fri,7,USA,Child,Male \nSALES,07/01/2013,30/12/2012,29/01/2013,Clicked,1,62,Mon,9,USA,Child,Female \nSALES,08/01/2013,30/12/2012,29/01/2013,Clicked,1,63,Tue,43,France,Adult,Male \nSALES,09/01/2013,30/12/2012,29/01/2013,Clicked,1,64,Wed,2,France,Child,Male \nSALES,11/01/2013,30/12/2012,29/01/2013,Clicked,1,66,Fri,32,USA,Adult,Male \nSALES,12/01/2013,30/12/2012,29/01/2013,Clicked,1,67,Sat,4,USA,Child,Male \nSALES,13/01/2013,30/12/2012,29/01/2013,Clicked,1,68,Sun,47,USA,Adult,Female \nSALES,14/01/2013,30/12/2012,29/01/2013,No Click,0,69,Mon,49,USA,Adult,Male"
// set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 300 - margin.left - margin.right,
  height = 200 - margin.top - margin.bottom;

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

// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// get the data 
var data = d3.csvParse(dataString);

//console.log(data[0]);

// format all data from strings
data.forEach(function(d) {
  d.data = +d.data;
});

// Array [ Object, Object ] Key: Clicked, Key: No Clicked
var nested_data = d3.nest()
  .key(function(d) {
    return d.Clicked;
  })
  .key(function(d) {
    return d.Campaign
  })
  .rollup(function(values) {
    return values.length;
  })
  .entries(data);

var clicked_data = nested_data.find(d => d.key == "Clicked").values

// Scale the range of the data in the domains
x.domain(clicked_data.map(function(d) {
  return d.key;
}));
y.domain([0, d3.max(clicked_data, function(d) {
  return d.value;
})]);

// append the rectangles for the bar chart
svg.selectAll(".bar")
  .data(clicked_data)
  .enter().append("rect")

  .attr("class", "bar")
  .attr("x", function(d) {
    return x(d.key);
  })
  .attr("width", x.bandwidth())

  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.value);
  });



// 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));
<script src="https://d3js.org/d3.v4.min.js"></script>

相关问题
最新问题