d3.jsでundefinedが出てグラフが描画できません。

前提・実現したいこと

d3.jsを使って、データビジュアライズを勉強しています。
外部からcsvファイルを読み込んでブラウザ上で棒グラフを描画しようとしたところグラフが表示できなくなりました。
直接、データを指定して書き込んだ際はうまくグラフが描画できるので、外部ファイルの読み込みによる問題だと思っています。

発生している問題・エラーメッセージ

ローカルサーバーをPythonで立ち上げ、自分のPC上にあるcsvファイルをd3.csv()で読み込んでいます。
console.logで返したところ、csvのデータ自体は読み込まれており、heigthは function(d,i){return i *25;};で定義できているのですが、widthがfunction(d,i){return d + "px"};でブラウザに反映させると undefined　と未定義になります。

色々とネット上で解決策を探しているのですが、わかりません。
どなたかご教授いただけると幸いです。

//エラーメッセージ
Error: <rect> attribute width: Expected length, "undefinedpx".
d3.v4.min.js:2 Error: <rect> attribute width: Expected length, "undefinedpx".
(anonymous) @ d3.v4.min.js:2
each @ d3.v4.min.js:2
attr @ d3.v4.min.js:2
(anonymous) @ sample.js:19
(anonymous) @ d3.v4.min.js:2
call @ d3.v4.min.js:2
e @ d3.v4.min.js:2
XMLHttpRequest.send (async)
send @ d3.v4.min.js:2
get @ d3.v4.min.js:2
(anonymous) @ d3.v4.min.js:2
(anonymous) @ sample.js:3
d3.v4.min.js:2 Error: <rect> attribute width: Expected length, "undefinedpx".
(anonymous) @ d3.v4.min.js:2
each @ d3.v4.min.js:2
attr @ d3.v4.min.js:2
(anonymous) @ sample.js:19
(anonymous) @ d3.v4.min.js:2
call @ d3.v4.min.js:2
e @ d3.v4.min.js:2
XMLHttpRequest.send (async)
send @ d3.v4.min.js:2
get @ d3.v4.min.js:2
(anonymous) @ d3.v4.min.js:2
(anonymous) @ sample.js:3
d3.v4.min.js:2 Error: <rect> attribute width: Expected length, "undefinedpx".
(anonymous) @ d3.v4.min.js:2
each @ d3.v4.min.js:2
attr @ d3.v4.min.js:2
(anonymous) @ sample.js:19
(anonymous) @ d3.v4.min.js:2
call @ d3.v4.min.js:2
e @ d3.v4.min.js:2
XMLHttpRequest.send (async)
send @ d3.v4.min.js:2
get @ d3.v4.min.js:2
(anonymous) @ d3.v4.min.js:2
(anonymous) @ sample.js:3
d3.v4.min.js:2 Error: <rect> attribute width: Expected length, "undefinedpx".
(anonymous) @ d3.v4.min.js:2
each @ d3.v4.min.js:2
attr @ d3.v4.min.js:2
(anonymous) @ sample.js:19
(anonymous) @ d3.v4.min.js:2
call @ d3.v4.min.js:2
e @ d3.v4.min.js:2
XMLHttpRequest.send (async)
send @ d3.v4.min.js:2
get @ d3.v4.min.js:2
(anonymous) @ d3.v4.min.js:2
(anonymous) @ sample.js:3
d3.v4.min.js:2 Error: <rect> attribute width: Expected length, "undefinedpx".

該当のソースコード

index.html

index.html
1<!DOCTYPE html>
2   <html lang="en">
3      <head>
4         <meta charset="utf-8">
5         <title>横棒グラフ</title>
6
7         <style>
8
9           #myGraph rect{
10             stroke:rgb(160,0,0);
11             stroke-width:1px;
12             fill:rgb(255,0,0);
13           }
14         </style>
15
16         <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
17
18      </head>
19
20      <body>
21        <h1>横棒グラフ</h1>
22        <svg id ="myGraph"></svg>
23        <script src="js/sample.js"></script>
24      </body>
25
26    </html>
27

sample.js

sample.js
1//CSVファイルを読み込んでグラフを描画する
2d3.csv("mydata.csv",function(error, data){
3  var dataSet = [ ];
4  for(var i = 0; i < data.length ; i++){
5    console.log(data);
6    dataSet.push(data[i].item2);
7  }
8
9  d3.select("#myGraph")
10    .selectAll("rect")
11    .data(dataSet)
12    .enter()
13    .append("rect")
14    .attr("x" , 0)
15    .attr("y",function(d,i){
16      return i * 25 + "px";
17    })
18    .attr("width",function(d,i){
19      return d + "px";
20    })
21    .attr("height","20px")
22
23  
24});
25