我正在尝试获取具有此嵌套形式的xy数据的范围：
data = [
{"points": [{"x": 0, "y": 0}, {"x": -5, "y": 100}, {"x": 300, "y": 1}, ...],
"rgbval": "rgb(0, 0, 0)"
},
{"points": [{"x": 1, "y": 2}, {"x": -7000, "y": 2}, {"x": 0, "y": 0}, ...],
"rgbval": "rgb(255, 0, 0)"
},
.
.
.
]
对于此样本数据，我正在寻找的值是：
x_domain = [-7000, 300]
y_domain = [0, 100]
我能够使用以下方式获得特定点数的范围：
for i in [0...data.length]
console.log(d3.extent(data[i].points, (d) -> d.x)) # x_domain of i_th group of points
console.log(d3.extent(data[i].points, (d) -> d.y)) # y_domain of i_th group of points
在示例中，这会给我两个x_domains和两个y_domains。我想要整个xy数据的域名。
答案 0 :(得分：4)
首先，使用d3.merge合并数组（这非常奇特<script>
function refresher() {
$('#si, .si').load('/TallySet/cart');
};
function printDiv(divID) {
debugger;
var printContents = document.getElementById(divID).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
};
</script>
<div class="col-lg-12 popblk">
<p>New Sales Invoice</p>
</div>
<div class="col-lg-12" style="background-color:white">
<div class="row">
<div class="col-lg-2">
<p>Customer : </p>
</div>
<div class="col-lg-4">
@Html.DropDownList("customers")
</div>
</div>
<div class="row">
<div class="col-lg-4">
@Html.DropDownList("items")
</div>
<div class="col-lg-4">
@Html.TextBoxFor(x => x.quantity)
</div>
<div class="col-lg-2">
<button value="Add to cart" onclick="addToCart()">Add to cart</button>
</div>
<div class="col-lg-2">
<button value="Refresh" onclick="printDiv('si')">Refresh Cart</button>
</div>
</div>
<div class="row" id="si" style="margin-left:50px;">
@{Html.RenderAction("cart", "TallySet");}
</div>
<div class="row" style="background-image:url('../../viewData/sale_footer.png')">
</div>
<button class="rButtonCancel" value="X" data-dismiss="modal" onclick="listVoider()">X</button>
</div>
）：
@model IEnumerable<Fast_Tally_Accounter.Models.salesCart>
<img src="~/viewData/sale_head.png" />
@if(Model!=null)
{
foreach(var v in Model)
{
<div class="row" style="background-image:url('../../viewData/sale_row.png'); background-repeat:no-repeat;margin-left:0px;margin-bottom:0px">
<div class="col-lg-2">
<p>@v.quantity KG</p>
</div>
<div class="col-lg-4">
<p>@v.itemName</p>
</div>
<div class="col-lg-1">
<p>@v.itemPrice</p>
</div>
<div class="col-lg-1">
<p>@v.itemTotal</p>
</div>
</div>
}
}
<div class="row" style="background-image:url('../../viewData/sale_footer.png'); background-repeat:no-repeat; margin-left:0px; height:120px">
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>@ViewBag.dt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>Daniyal humayun</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:10px; margin-right:0px" id="myRow">
<p>@ViewBag.qt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:0px; margin-right:0px" id="myRow">
<p>@ViewBag.pr</p>
</div>
</div>
然后，以正常的方式获得范围：
concat以下是演示：
var merged = d3.merge(data.map(function(d){ return d.points}));
var xExtent = d3.extent(merged, function(d){ return d.x});
var yExtent = d3.extent(merged, function(d){ return d.y});
PS：不要将这种不常见的var data = [{
"points": [{
"x": 0,
"y": 0
}, {
"x": -5,
"y": 100
}, {
"x": 300,
"y": 1
}],
"rgbval": "rgb(0, 0, 0)"
}, {
"points": [{
"x": 1,
"y": 2
}, {
"x": -7000,
"y": 2
}, {
"x": 0,
"y": 0
}],
"rgbval": "rgb(255, 0, 0)"
}];
var merged = d3.merge(data.map(function(d) {
return d.points
}));
var xExtent = d3.extent(merged, function(d) {
return d.x
});
var yExtent = d3.extent(merged, function(d) {
return d.y
});
console.log("x extent: " + xExtent);
console.log("y extent: " + yExtent);误认为更有名的<script src="https://d3js.org/d3.v4.min.js"></script>。