Question

我想在焦点+上下文散点图中沿x轴进行刷子，其中x和y轴都是带字符串的序数比例。此处提供了链接 http://jsfiddle.net/qYh9w/ 刷新适用于数字数据但在此上下文中停止工作。请告诉我如何对这些数据进行刷牙工作。

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

svg {
    font: 10px sans-serif;
}


.axis path, .axis line {
     fill: none;
     stroke: #000;
     shape-rendering: crispEdges;
}

.brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}

.dot {
     stroke: #000;
}

</style>
<body>
     <script src="http://d3js.org/d3.v3.min.js"></script>
     <script>

          var x_data = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar"];
          var y_data = ["boy","girl","lady","man","woman","boy","boy","girl","woman","girl","boy","lady","girl","boy","girl","woman","lady","boy","lady","boy","man","man","girl","girl","boy","man","boy"];

function getData( )
{
  var dataset = [];


  var num_of_items = x_data.length;

  for (var i = 0; i < num_of_items; i++) {

    dataset.push( { date: x_data[i], price: y_data[i]  } );
  }
  return dataset;
}

var data = getData( );


var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;


var x = d3.scale.ordinal(),
x2 = d3.scale.ordinal(),
y = d3.scale.ordinal(),
y2 = d3.scale.ordinal();


var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed);

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

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

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


x.domain(x_data);
y.domain(y_data);

x.rangeRoundBands([0, width], 0);
y.rangeRoundBands([height, 0], 0);

x2.domain(x.domain());
y2.domain(y.domain());

x2.rangeRoundBands([0, width], 0);
y2.rangeRoundBands([height2, 0], 0);






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

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


context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);

context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", 0)
.attr("height", height2 + 7);

// draw dots
focus.selectAll(".dot")
.data(data)
.enter().append("path")
.attr("class", "dot")
.attr("d", d3.svg.symbol().type("triangle-up"))

.attr("transform", function(d) {
    console.log( x(d.date) + "," + y(d.price) );
    return "translate(" + x(d.date) + "," + y(d.price) + ") " + "rotate(90)"; })
.style("fill", "blue");

context.selectAll(".dot")
.data(data)
.enter().append("path")
.attr("class", "dot")
.attr("d", d3.svg.symbol().type("triangle-up"))

.attr("transform", function(d) { return "translate(" + x2(d.date) + "," + y2(d.price) + ") " + "rotate(90)"; })
.style("fill", "blue");


function brushed() {

    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.select(".x.axis").call(xAxis);
    focus.selectAll(".dot").attr("d", d3.svg.symbol().type("triangle-up")).attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.price) + ") " + "rotate(90)"; });

}


</script>

或者，可以在此处找到来源（https://www.dropbox.com/s/52fnzp87vxvfsli/ex11.html）。

Answer 1

我发现可以通过修改刷函数来完成解决方案

function brushed() {
var extent = brush.extent();

//if (!x2.invert) {
var d = x2.domain(),
    r = x2.range();
extent = extent.map(function(e) { return d[d3.bisect(r, e) - 1]; });

x.domain(brush.empty() ? d : extent);
focus.select(".x.axis").call(xAxis);
focus.selectAll(".dot").attr("d", d3.svg.symbol().type("triangle-up")).attr("transform",    function(d) { return "translate(" + x(d.date) + "," + y(d.price) + ") " + "rotate(90)"; });

//}
}

解决方案来自Jason Davies（https://groups.google.com/forum/#!msg/d3-js/_YTIAmDBVhM/4sitbWd6C2oJ）

无法在d3.js中对有序数据（字符串）执行刷洗

1 个答案: