I like the d3 sortable bar chart example:
Unfortunately, it doesn't appear to work correctly in v2 (the example uses v3). At first, I thought it was me, so wrote a new example from scratch. Alas, it wasn't! In v2 the x axis labels don't transition with the bars; in v3 both labels and bars transition together.
Can anyone suggest a workaround for v2?
Thanks in advance.
Okay, I think there are two solutions to this problem. As Robert Harvey pointed out, you could use v3. The main difference that I can see so far is that d3.tsv (and possibly the other read data methods) take an additional parameter: this was what was causing the other parts of my code to fail. So, even though v3 isn't the latest release, this is my preferred solution.
The second solution is to transition the axis labels explicitly. This would take more code and as v3 is (hopefully!) on the horizon, might only be necessary if you really can't wait and absolutely must use v2.
Related
I am using r82.
I have a mesh with multiple materials. I can change their opacity just fine, but how they are rendered is what I would call "splotchy". I have been using ThreeJs for a while, and EDIT: was able to get the transparency working in a past version (r67) with the same model in a significantly more consistent way. So I was wondering if there is something that now I need to set that I didn't need to set before or if I am just overlooking something. Upon revisiting my older code and testing it again, I found that the same transparency issues were present. It was simply a matter of there not being as obvious "splotches" (and not testing enough, I'm sure). Here is a screenshot.
Here are a few more pictures I took that highlight the issue a bit better. I have the outside wall in a light grey and the floors a dark grey in the model and can toggle the outside walls to be visible or not. In these pictures I have one face of the outside wall purple and a face of the floor in the room on the other side of the wall green.
Based on the angle of the camera, it makes part of the green floor face invisible even though there is only one face between the camera and it.
The materials are all double sided already and there is no sign of this until the transparency is on. I found a similar question that suggested changing the mesh.setFaceCulling (or something similar) but that seemed to be from an older version and wasn't in r82.
Thanks for any help in advance!
EDIT:
I started looking into the old version of threeJS and the current version's source code to see what is done differently regarding transparency. I found transparentObjects, which is an array of the objects (I believe faces) that are going to be rendered and are in sorted based on "reversePainterSortStable". There is another list of objects (I believe for the materials objects, maybe?) called opaqueObjects that uses "painterSortStable". So to see if changing the sort order would change the outcome of how things are looking when transparent I changed it so that transparentObjects got sorted by "painterSortStable" and it did change how things showed up significantly (granted it didn't fix my problem since it just removed some problem spots and created new ones).
So the short version, it looks like it is an issue with the renderOrder of the faces.
That being said, I tried finding how the r67 version of the code handled the "renderOrder" of the faces since it wasn't something that (to my knowledge) could be set in that version and just did it automatically. But I have had no such luck tracking down how it was done as of yet.
So I see two possibilities. 1) find out how the past version correctly did transparency (at least for my purposes) and change the logic in the current version to use that. Or 2) find how to properly set the renderOrder of the faces based on the camera position in the scene. Will look into the second option first, but figured it would be good to document this for others looking to help answer or that have a similar problem.
EDIT 2:
So digging through the source code for threeJs and noticed something about the transparentObjects array I mentioned in the previous edit. The first, that I cannot for the life of me figure out how it gets populated since it doesn't seem like it is added to anywhere in the code. The second is that I think it is being populated with duplicates of the entire building object/mesh (see screenshot below).
The z indexes all seem to be the same. as well as the ids and the objects are all of type "mesh" (of the ones I looked through, granted, since there are a few thousand). So I was going to figure out why its adding what is being added to the array, but that is when I stumbled across the issue of not finding where in the code that the transparentObjects array actually get populated.
EDIT 3:
WestLangley, I tried setting the depth test for the outer wall material to false and got this. Like I said in my response comment, even if it did work it wouldn't fix the issues experienced with the camera inside the building, but wanted to follow up none the less (see snapshot below).
I have about 500 XY points which I would like represent as line using DHTMLXChart. Apparently the only suitable chart (scatter) do not allowing to do it. Any idea how to solve this issue?
There is no native way to do this.
You could use line chart with markers:
Example
Ok on that confirmation you're not bound to a DHTMLX, I would go with Google Charts it's based on opinion, but more importantly on functionality.
The Google Charts API is very easy to work with as it takes raw Javascript data and applies it to the chart and that data may be shoved into multidimensional arrays or as I prefer, JSON Data.
Additionally the Google Charts API has what you are after which is located at https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart or alternatively...
https://developers.google.com/chart/interactive/docs/gallery/scatterchart
P.S. It may be a hefty documentation to read, but learning Google Charts API pays dividends and this would Replace DHTMLX instead of being an additional plugin.
Hope that helps.
I tried to make Mike Bostocks example of focus + context via brushing (http://bl.ocks.org/mbostock/1667367) make reusable following his convention: bost.ocks. org/mike/chart/ [sorry, I'm not allowed to post more than 2 links yet]
I modified his brushing example a little bit, worked perfect, but I'm failing on making that reusable now. Whenever I try to select something on the context chart, the focus chart zooms in - but never out again.
The code is here: http://plnkr.co/edit/VoEL1eFJI1Xnajzf82Zq?p=preview
Can anyone give me a hint what I'm doing wrong here?
You are using the wrong scale for the brush -- it should be the one assigned to the context chart, xScaleTimeLine in your case. Fixed example here.
On a general note, including data processing (such as parsing dates and formatting numbers) in your reusable chart component is not best practice. I would first process the data itself and then pass it to the chart component such that no further processing needs to be done. A chart component like this can be used even if the data processing required is quite complex (e.g. nesting).
I am new to D3js and working with the parsets reusable chart (http://www.jasondavies.com/parallel-sets/). I want to make changes to this chart such as adding sort based on thickness of ribbons on mouseover, and overlaying two parallel sets over each other to compare different datasets at once (The one at the back being faded).
Being new to D3js, I am having difficulty in understanding where to start. I am currently trying to understand the code of d3.parsets.js but its not going too well. If anyone has worked with this before and understands the procedure being followed in the code, please help me out.
The best adaptation I've seen of d3.parsets.js is by Hongjian Yang: Airline Vis adapted from d3.parsets.
It may be able to accomplish some of what you're looking for, though I'm not sure you'll readily be able to overlay two datasets (nor am I sure I understand the need to do so).
Is there a masonry type algorithm for d3.js? (a la isotope http://isotope.metafizzy.co/)
As a related question (if that's not available), how would I go about doing it? Specifically: I know the enter/update/exit paradigm of d3, but it seems like it treats all the points independently of each other. If I wanted to change the layout of the 2nd point, based on where I put the 1st point, how would I do that?
The matrix layout might be what you are looking for, you can see an example here: http://bl.ocks.org/mbostock/1009139
edit: just found a second example providing similar layout: http://bl.ocks.org/herrstucki/5684816
Here is a masonry layout for d3:
https://github.com/shawnbot/masonic
The demo:
http://shawnbot.github.io/masonic