D3.jsとeXist-DBのウェブ連携構築

では、D3.jsでp5.jsと同じようなウェブ連携が簡単にできるだろうか（もちろんできるはずだけど）？

１．まずは、CSVファイルからXMLファイルの取り込みへと変更してみる。
苦労は、DOMとしてのXMLファイルから、SVVとSVIのデータを数値として切り出す方法であった。
var svv = row[i].childNodes[3].childNodes[0]だけだと、”10″というようなObject型として切り出され、これは文字列ではないので、Number関数では変換できずでNaNとなってしまう。

d3.xml("./js/2013_8_24.xml", function(error, dataSet){
console.log(dataSet);
var row = dataSet.getElementsByTagName("row");
for(var i=0; i<row.length; i++){ 

// 散布図を描画
var svv = row[i].childNodes[3].childNodes[0].nodeValue;
var svi = row[i].childNodes[7].childNodes[0].nodeValue;
var x = Number(svv);
var y = Number(svi);

d3.xml("./js/2013_8_24.xml", function(error, dataSet){

console.log(dataSet);

var row = dataSet.getElementsByTagName("row");

for(var i=0; i<row.length; i++){

// 散布図を描画

var svv = row[i].childNodes[3].childNodes[0].nodeValue;

var svi = row[i].childNodes[7].childNodes[0].nodeValue;

var x = Number(svv);

var y = Number(svi);

そこで、タグの内容をvar svv = row[i].childNodes[3].childNodes[0].nodeValue;で文字列として取り出して、Number関数で数値化することでOKとなった。

++++++++++++++++
sample_d3.js
++++++++++++++++
var dataSet = [];
var svv;
var svi;
var row;
var x;
var y

// Ｘ，Ｙ軸を表示できるようにグラフの周囲にマージンを確保する
var margin = {top: 50, right: 50, bottom: 50, left: 50};
var width = 400 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
 
 // SVGの表示領域を生成
var svg = d3.select("#myGraph")
.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 + ")");

d3.xml("./js/2013_8_24.xml", function(error, dataSet){
    console.log(dataSet);
  
   var row = dataSet.getElementsByTagName("row");

    for(var i=0; i<row.length; i++){   // rowタグの数だけ処理

 // 散布図を描画
   var svv = row[i].childNodes[3].childNodes[0].nodeValue;
   var svi = row[i].childNodes[7].childNodes[0].nodeValue;
   
   var x = Number(svv);
   var y = Number(svi);
  //console.log(x);
  //console.log(y);

  // スケール関数を作成。
  var xScale = d3.scale.linear()
    .domain([0,50])
    .range([0,width]);

  var yScale = d3.scale.linear()
    .domain([0,120])
    .range([height,0]);

 // 散布図を描画
  svg.append("circle")
    .attr("r", 2)
    .attr("fill", "red")
    .attr("cx", function(d){
      return xScale(svv);
    })
    .attr("cy", function(d){
      return yScale(svi);
    });

}

  // Ｙ軸を描画
  svg.append("g")
    .attr("class", "axis")
    .call(d3.svg.axis()
      .scale(yScale)
    .orient("left")
  );
  
  // Ｘ軸を描画
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg
      .axis()
      .scale(xScale)
      .orient("bottom")
  );
  
  
 // Ｘ軸凡例
  svg.append("g")
    .append("text")
    .attr("x", 270)
    .attr("y", 280)
    .text("SVV");

  // Ｙ軸凡例
  svg.append("g")
    .append("text")
    .attr("x", 20)
    .attr("y", 20)
    .text("SVI");
    
})

++++++++++++++++

sample_d3.js

++++++++++++++++

var dataSet = [];

var svv;

var svi;

var row;

var x;

var y

// Ｘ，Ｙ軸を表示できるようにグラフの周囲にマージンを確保する

var margin = {top: 50, right: 50, bottom: 50, left: 50};

var width = 400 - margin.left - margin.right;

var height = 400 - margin.top - margin.bottom;

// SVGの表示領域を生成

var svg = d3.select("#myGraph")

.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 + ")");

d3.xml("./js/2013_8_24.xml", function(error, dataSet){

console.log(dataSet);

var row = dataSet.getElementsByTagName("row");

for(var i=0; i<row.length; i++){ // rowタグの数だけ処理

// 散布図を描画

var svv = row[i].childNodes[3].childNodes[0].nodeValue;

var svi = row[i].childNodes[7].childNodes[0].nodeValue;

var x = Number(svv);

var y = Number(svi);

//console.log(x);

//console.log(y);

// スケール関数を作成。

var xScale = d3.scale.linear()

.domain([0,50])

.range([0,width]);

var yScale = d3.scale.linear()

.domain([0,120])

.range([height,0]);

// 散布図を描画

svg.append("circle")

.attr("r", 2)

.attr("fill", "red")

.attr("cx", function(d){

return xScale(svv);

})

.attr("cy", function(d){

return yScale(svi);

});

}

// Ｙ軸を描画

svg.append("g")

.attr("class", "axis")

.call(d3.svg.axis()

.scale(yScale)

.orient("left")

);

// Ｘ軸を描画

svg.append("g")

.attr("class", "axis")

.attr("transform", "translate(0," + height + ")")

.call(d3.svg

.axis()

.scale(xScale)

.orient("bottom")

);

// Ｘ軸凡例

svg.append("g")

.append("text")

.attr("x", 270)

.attr("y", 280)

.text("SVV");

// Ｙ軸凡例

svg.append("g")

.append("text")

.attr("x", 20)

.attr("y", 20)

.text("SVI");

})

2. 次に、eXsitへのウェブ通信でのXML出力の取り込み用に書き換えてみる。

d3.xml("http://localhost:8080/exist/rest//db/vigileo/2013_8_24.xml", function(error, dataSet){

1	d3.xml("http://localhost:8080/exist/rest//db/vigileo/2013_8_24.xml", function(error, dataSet){

と問題なく動作した。

Science To Medicine

Just My Daily Study Note by ts.anesth.kpum

D3.jsとeXist-DBのウェブ連携構築