4

나는 계층 구조/트리 구조에서 상호 작용 설계를하는 데 영감을 얻고 있습니다. (여러 하위 제품이있는 제품, 하위 제품 선택에 적용되는 규칙).HTML의 트리 계층 구조 시각화

하위 노드와 상위 노드 사이에 눈에 보이는 연결이있는 트리를 만들고 싶습니다. 그리고 나는 그것들을 선택하는데 적용되는 규칙을 시각화하기를 원합니다.

일반적인 규칙 :

  • 필수 : ​​하나의 하위 제품 중 하나만
  • 옵션 선택 : 여러 하위의 0 이상을 선택
  • 상호 배타적 인 : 여러 하위의 선택 하나

아이디어를 얻길 바랍니다.

나는이 분야의 영감을 찾고있다. 어떤 제안, 예제, 팁도 환영합니다.

답변

4

여기에 몇 가지 있습니다 :

당신은 HTML/자바 스크립트 이외의 것을 사용하고자하는 경우는, Flare 어도비 플래시를위한 훌륭한 라이브러리입니다 .

+0

이러한 Protovis 예제는 엄청나게 아름답습니다. 나는 그들을 몇 시간 동안 공부할 수 있었다. 저를 가리켜 주셔서 감사합니다. 으로 돌아가서 제품/하위 제품 구조에 적합 할 수있는 몇 가지 예가 있습니다. 선 버스트 또는 고드름은 모두 계층을 나타냅니다. 그러나 아무도 규칙 관점을 시각화하지 못합니다. 일부 제품은 필수 제품이고 다른 제품은 선택적 제품이고 다른 제품은 다시 배타적 제품임을 시각화하는 방법은 무엇입니까? –

+0

예를 들려 줄 수 있습니까? 당신은 사용자가 차를 만들었다 고 말하면서 많은 상호 배타적 인 모델에 대한 선택권을 가지고 있고, 자동 대 수동의 상호 배타적 인 선택을 가지고 있고, 그 다음 차의 색 등을위한 상호 배타적 인 선택을 가지고 있다고 말하고 있습니까? 그렇다면 그들은 DVD 플레이어, GPS 등의 옵션을 선택할 수 있습니까? 그게 유스 케이스인가? 사용자는 누구입니까? 소비자? 마케팅 사람들? 엔지니어? –

+0

예, 자동차 예가 실제로 꽤 좋습니다. (이제는 하나의 엔진, 4 개의 타이어 등 필수 선택 사항을 무시합시다). 필수 선택 사항 외에도 언급 된대로 선택 사항이 있습니다. 또한 상호 배타적 인 것도 있습니다. 당신의보기에서 자동 대 수동 교대. 시각화를 시도하는 제품 트리는보다 체계적이므로 선택은 어떤 깊이에서든 하위 제품으로 이어집니다. 따라서 각 트리 노드에서 선택의 종류를 나타내는 항목이 필요합니다. (아마 트리 노드에서 '0..2'또는 그와 비슷한 것을 선택하십시오.) –

2

저는 이러한 시나리오에 Infoviz 라이브러리를 사용했습니다 (여기에는 demo입니다). 처음에는 매우 직관적이지는 않지만 일부 텍스트 설명과 함께 다른 선택 규칙에 대해 별개의 노드 색상을 사용할 수 있습니다.

기본 트리 방향은 수평이며 이상하게 보일 수 있지만 가변 길이의 텍스트 노드 이름을 추가 할 때 의미가 있습니다.