D3中轴的异常值(混合数值和分类规范) [英] Outliers in Axes in D3 (Mixing numerical and categorical specifications)
问题描述
我试图在D3中设置一些东西，其中我有一个用于收集某些数据点的轴.但是，对于数据点的异常值，我想将这些异常值放在轴上的存储桶中.有没有一种方法可以为轴指定一个异常标记"，以用作放置这些数据点的分区?
I am trying to set something up in D3 where I have an axis for some collection of datapoints. In the case of outliers for the datapoints, however, I'd like to put those outliers in a bucket on an axis. Is there a way that I could specify an "outlier tickmark" for the axis to serve as a partition for placing those datapoints?
Example: [1,3, 7, 12, 2048]
* * * * *
--1--2--3--4--5--6--7--8--9--10--11--12--13--14--15--O--
以下是我当前拥有的代码.在我看来，比例只能在数字上起作用，所以我不确定如何将任意类别与数字比例混合在一起.
This following is the current code I have. It seems to me that scales only work numerically so I'm not sure how to mix arbitrary categories with a numerical scale...
let height = 1000;
let width = 1000;
let padding = 10;
let svgContainer = d3.select("body").append("svg").attr("width", width).attr("height", height);
let axisScale = d3.scale.linear().domain([0, 10]).range([ padding, width - padding]);
let xAxis = d3.svg.axis().scale(axisScale);
let xAxisYValue = height - padding * 3;
let xAxisGroup = svgContainer.append("g").attr("transform", "translate(0," + xAxisYValue + ")").call(xAxis);
推荐答案
正如我在评论中所说，我会这样做:
As I said in my comments, I'd do it something like this:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var data = [];
for (i = 0; i <= 10; i++) {
data.push({
x: i,
y: Math.random()
});
}
data.push({
x: "Other",
y: Math.random()
});
data.push({
x: "Other",
y: Math.random()
});
data.push({
x: "Other",
y: Math.random()
});
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
widthRight = 100,
widthMain = 600 - margin.left - margin.right - widthRight,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.linear()
.range([0, widthMain])
.domain([0, 10]);
var x1 = d3.scale.ordinal()
.rangePoints([widthMain, widthMain + widthRight], 2)
.domain(["Other"]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0, 1]);
var xAxis0 = d3.svg.axis()
.scale(x0)
.orient("bottom");
var xAxis1 = d3.svg.axis()
.scale(x1)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", widthMain + widthRight + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
if (isNaN(d.x)) {
return x1(d.x);
} else {
return x0(d.x);
}
})
.attr("cy",function(d) {
return y(d.y);
})
.attr("r", 10)
.style("fill", "steelblue")
.style("stroke", "orange");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis0);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis1);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
</script>这篇关于D3中轴的异常值(混合数值和分类规范)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
