个人中心
gpt4 book ai didi

javascript - 使用 d3js 将 jointplot 添加到 NBA 投篮图

转载 作者：行者123 更新时间：2023-11-30 11:53:03 26 4
gpt4 key购买 nike

我正在尝试向 NBA 投篮图添加联合图，

所以它看起来像这样:

enter image description here

问题是我无法让这些条正常工作，我真的不知道为什么会这样。

如果有人指导我为了使用 NBA 图表我必须在联合图中更改什么，那就太好了。

NBA 投篮图:

http://jsbin.com/guqiviniji/edit?html,output

联合图实现:

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <style>
    .bar {
      fill: steelblue;
    }
    
    .bar:hover {
      fill: brown;
    }
    
    .axis {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .x.axis path {
      display: none;
    }
  </style>
</head>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    // set the dimensions and margins of the graph
    var margin = {
        top: 80,
        right: 80,
        bottom: 20,
        left: 20
      },
      width = 400 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)

    var g = svg.append("g")
      .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

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

    // Add the X Axis
    g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis().orient("bottom").scale(x));

    // Add the Y Axis
    g.append("g")
      .attr("class", "axis")
      .call(d3.svg.axis().orient("left").scale(y));

    var random = d3.random.normal(0, 1.2),
      data = d3.range(100).map(function() {
        return [random() + 5, random() + 5];
      });

    g.selectAll(".point")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return x(d[0]);
      })
      .attr("cy", function(d) {
        return y(d[1]);
      })
      .attr("r", 7)
      .style("fill", "steelblue")
      .style("stroke", "lightgray");

    // top histogram
    var gTop = svg.append("g")
      .attr("transform",
        "translate(" + margin.left + "," + 0 + ")");

    var xBins = d3.layout.histogram()
      .range(x.domain())
      .bins(x.ticks(10))
      .value(function(d) {
        return d[0];
      })(data);

    var xy = d3.scale.linear()
      .domain([0, d3.max(xBins, function(d) {
        return d.length;
      })])
      .range([margin.top, 0]);

    var xBar = gTop.selectAll(".bar")
      .data(xBins)
      .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) {
        return "translate(" + x(d.x) + "," + xy(d.length) + ")";
      });

    var bWidth = x(xBins[0].dx) - 1;
    xBar.append("rect")
      .attr("x", 1)
      .attr("width", bWidth)
      .attr("height", function(d) {
        return margin.top - xy(d.length);
      })
      .style("fill", "steelblue");

    xBar.append("text")
      .attr("dy", ".75em")
      .attr("y", 2)
      .attr("x", bWidth / 2)
      .attr("text-anchor", "middle")
      .text(function(d) {
        return d.length < 4 ? "" : d.length;
      })
      .style("fill", "white")
      .style("font", "9px sans-serif");

    // right histogram
    var gRight = svg.append("g")
      .attr("transform",
        "translate(" + (margin.left + width) + "," + margin.top + ")");

    var yBins = d3.layout.histogram()
      .range(y.domain())
      .bins(y.ticks(10))
      .value(function(d) {
        return d[1];
      })(data);

    console.log(yBins);

    var yx = d3.scale.linear()
      .domain([0, d3.max(yBins, function(d) {
        return d.length;
      })])
      .range([0, margin.right]);

    var yBar = gRight.selectAll(".bar")
      .data(yBins)
      .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) {
        return "translate(" + 0 + "," + y(d.x + d.dx) + ")";
      });

    yBar.append("rect")
      .attr("y", 1)
      .attr("width", function(d) {
        return yx(d.length);
      })
      .attr("height", bWidth)
      .style("fill", "steelblue");

    yBar.append("text")
      .attr("dx", "-.75em")
      .attr("y", bWidth / 2 + 1)
      .attr("x", function(d) {
        return yx(d.length);
      })
      .attr("text-anchor", "middle")
      .text(function(d) {
        return d.length < 4 ? "" : d.length;
      })
      .style("fill", "white")
      .style("font", "9px sans-serif");
  </script>
</body>

</html>

最佳答案

由于我在评论中付出了很多努力来回答这个问题over here ，我想将它重新散列为这个问题的答案是值得的。

我真的看到jsbin链接中的代码有两个大问题。

首先，对神奇数字的强烈依赖。看起来 OP 使用反复试验来为他的图表的特定高度/宽度正确放置镜头。当然，这意味着增加边距或改变尺寸需要付出大量努力来开发新的魔数(Magic Number)。我在下面通过随着图表高度和宽度的变化按百分比缩放原始魔数(Magic Number)来解决这种依赖。这有点 hack，但似乎有效。

其次，在我开发的原始“联合图”示例中，我使用用户空间 数据分箱 数据。然后我需要 x 和 y 比例来将用户空间箱映射回像素位置。不过，在 OPs jsbin 中，他正在使用 pixel-space 数据对数据进行分箱。这当然是完全有效的，事实上，随着条形图的放置变得更加容易，这可能更好。您不需要重新引入更多的秤来放置它们。

最后，我做了更多的工作来使 bin 大小可调。

下面是右直方图的一些代码:

    // right histogram
    var gRight = r_svg.append("g")
      .attr("transform",
        "translate(" + (margins.left + max.x) + "," + margins.top + ")");

    var m = d3.max(histogramData, function(d) { return d[1] });
    var yBins = d3.layout.histogram()
      .range([0, m])
      .bins(d3.range(0, m + 20, 20)) //<-- bin size is more adjustable, lower the 20, 20 for more bins
      .value(function(d) {
        return d[1];
      })(histogramData); //<-- data has pixel values

    var yx = d3.scale.linear()
      .domain([0, d3.max(yBins, function(d) {
        return d.length;
      })])
      .range([0, margins.right]);

    var yBar = gRight.selectAll(".bar")
      .data(yBins)
      .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) {
        return "translate(" + 0 + "," + (d.x) + ")"; //<-- pixel values just place at d.x
      });

    yBar.append("rect")
      .attr("y", 1)
      .attr("width", function(d) {
        return yx(d.length);
      })
      .attr("height", bWidth)
      .style("fill", "steelblue");

    yBar.append("text")
      .attr("dx", "-.75em")
      .attr("y", bWidth / 2 + 1)
      .attr("x", function(d) {
        return yx(d.length);
      })
      .attr("text-anchor", "middle")
      .text(function(d) {
        return d.length < 15 ? "" : d.length;
      })
      .style("fill", "white")
      .style("font", "9px sans-serif");

Running code is here .

关于javascript - 使用 d3js 将 jointplot 添加到 NBA 投篮图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38912880/

26 4 0
文章推荐： javascript - 替换 jQuery 或 javascript 中所有出现的字符
文章推荐： arrays - 在 Swift 中从 ImagePickerControllerImageURL 保存并附加 UserDefaults 中的数组
文章推荐： swift - 尝试从核心数据加载时在 swift 中发现 nil
文章推荐： ios - 每次按下按钮时将数据添加到 UITextView 中的新行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com