获得D3中复杂数据结构的范围

Question

我正在尝试获取具有此嵌套形式的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数据的域名。

Answer 1

首先，使用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>。