無法使用D3

無法使用D3

var margin = { 
 
    top: 30, 
 
    right: 20, 
 
    bottom: 30, 
 
    left: 50 
 
}; 
 
var width = 600 - margin.left - margin.right; 
 
var height = 270 - margin.top - margin.bottom; 
 

 
var x = d3.scale.linear().range([0, width]); 
 
var y = d3.scale.linear().range([height, 0]); 
 

 
var xAxis = d3.svg.axis().scale(x) 
 
    .orient("bottom").ticks(5); 
 

 
var yAxis = d3.svg.axis().scale(y) 
 
    .orient("left").ticks(5); 
 

 
var valueline = d3.svg.line() 
 
    .x(function (d) { 
 
     return x(d.IP); 
 
    }) 
 
    .y(function (d) { 
 
     return y(d.count); 
 
    }); 
 

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

 
var data = [{ 
 
    "IP": "192.168.12.1", 
 
    "count": "100" 
 
}, { 
 
    "IP": "76.09.45.34", 
 
    "count": "200" 
 
}, { 
 
    "IP": "34.91.23.76", 
 
    "count": "300" 
 
}, { 
 
    "IP": "192.168.19.32", 
 
    "count": "400" 
 
}, { 
 
    "IP": "192.168.10.89", 
 
    "count": "500" 
 
}, { 
 
    "IP": "192.168.12.98", 
 
    "count": "600" 
 
}]; 
 

 
data.forEach(function (d) { 
 
    d.IP = d.IP; 
 
    d.count = +d.count; 
 
}); 
 

 
x.domain(d3.extent(data, function (d) { 
 
    return d.IP; 
 
    })); 
 
y.domain([0, d3.max(data, function (d) { 
 
    return d.count; 
 
    })]); 
 

 
svg.append("path") 
 
.attr("d", valueline(data)); 
 

 
svg.append("g") 
 
\t .attr("class", "x axis") 
 
\t .data(data) 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append("g") 
 
\t .attr("class", "y axis") 
 
    .call(yAxis) 
 
    .data(data);

body { 
 
    font: 12px Arial; 
 
} 
 
path { 
 
    stroke: steelblue; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 
.axis path, .axis line { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 1; 
 
    shape-rendering: crispEdges; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
</head> 
 
<body> 
 
</body> 
 
</html>

請幫我dispaly線圖。我被卡住了。我不知道如何使用這些代碼獲得x axis和折線圖。我是D3的新手，所以我很困惑。每當我做出更改時，軸都會熄滅。這些是我到現在爲止嘗試的最後一個代碼，但我只得到y axis及其標籤，但沒有x axis，並且該線也沒有被繪製。請幫我一把。提前致謝。

來源

2016-06-17 RACHITA PATRO

而不是Linear scale，它只需要整數範圍，因此您需要使用ordinal scale作爲x軸。

var x = d3.scale.ordinal().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom").ticks(5); 

var yAxis = d3.svg.axis().scale(y) 
    .orient("left").ticks(5); 

x.domain(data.map(function(d) { 
     return d.IP; 
    })) 
    .rangeRoundBands([0, width], 0.1); 
y.domain([0, d3.max(data, function (d) { 
    return d.count; 
    })]);

這是你的working code.

來源

2016-06-17 11:20:29 SiddP

你必須使用順序尺度爲x軸。

有序尺度具有離散域，例如一組名稱或類別。

參考：https://github.com/d3/d3/wiki/Ordinal-Scales

這裏是工作的代碼片段：

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

 
var width = 600 - margin.left - margin.right; 
 
var height = 270 - margin.top - margin.bottom; 
 

 
var x = d3.scale.ordinal().rangePoints([0, width]); 
 
var y = d3.scale.linear().range([height, 0]); 
 

 
var xAxis = d3.svg.axis().scale(x) 
 
    .orient("bottom").ticks(5); 
 

 
var yAxis = d3.svg.axis().scale(y) 
 
    .orient("left").ticks(5); 
 

 
var valueline = d3.svg.line() 
 
    .x(function(d) { 
 
    return x(d.IP); 
 
    }) 
 
    .y(function(d) { 
 
    return y(d.count); 
 
    }); 
 

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

 
var data = [{ 
 
    "IP": "192.168.12.1", 
 
    "count": "100" 
 
}, { 
 
    "IP": "76.09.45.34", 
 
    "count": "200" 
 
}, { 
 
    "IP": "34.91.23.76", 
 
    "count": "300" 
 
}, { 
 
    "IP": "192.168.19.32", 
 
    "count": "400" 
 
}, { 
 
    "IP": "192.168.10.89", 
 
    "count": "500" 
 
}, { 
 
    "IP": "192.168.12.98", 
 
    "count": "600" 
 
}]; 
 

 
data.forEach(function(d) { 
 
    d.IP = d.IP; 
 
    d.count = +d.count; 
 
}); 
 

 
x.domain(data.map(function(d) { 
 
    return d.IP 
 
})); 
 
y.domain([0, d3.max(data, function(d) { 
 
    return d.count; 
 
})]); 
 

 
svg.append("path") 
 
    .attr("d", valueline(data)); 
 

 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis);

body { 
 
    font: 12px Arial; 
 
} 
 
path { 
 
    stroke: steelblue; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 1; 
 
    shape-rendering: crispEdges; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
</head> 
 

 
<body> 
 
</body> 
 

 
</html>

來源

2016-06-17 11:20:44 Gilsha

謝謝Gillsha的幫助。我被困住了。你的代碼就像一個魅力。我需要深入瞭解D3。謝謝。：〜） –

很高興幫助:) – Gilsha

回答

相關問題